如何從Polymer中的Javascript訪問輕量級DOM信息

Question

題：

在Web組件規范中，當您想要從模板中讀取Light-DOM中的元素時，可以使用<content select></content>元素。 但是，如何從組件的javascript代碼中檢索此信息？

例：

<wc-timer>
    <wc-timer-title>I want to read this from JS</wc-timer-title>
</wc-timer>

謝謝你，哈維爾。

Answer 1

請記住， this的原型方法里面指的是元素本身。 IOW，就像你可以做element.innerHTML或element.firstChild你可以寫this.innerHTML或this.firstChild 。

簡單模式：

domReady: function() {
  console.log(this.textContent);
}

如果您使用<content>通過多個級別的Shadow DOM投影節點，則會變得更加復雜。 在這種情況下，您將需要使用<content>節點本身的getDistributedNodes api。

在開始之前，我建議你從簡單的版本開始，如果遇到麻煩，請提出跟進問題。

Answer 2

使用this來訪問lightDOM並使用this.shadowRoot訪問shadowDOM

Answer 3

我不知道模板呈現的是dom，但也許你可以試試這個：

//jQuery
$('wc-timer-title').text();

//Plain
document.getElementsByTagName("wc-timer-title")[0].innerHTML;

Answer 4

您應該可以使用/deep/ ，它已被棄用但沒有關於何時會發生的日期。