如何在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);
}

http://jsbin.com/bociz/2/edit

如果使用<content>通过多个级别的Shadow DOM来投影节点，则会变得更加复杂。在这种情况下，您将需要使用<content>节点本身的getDistributedNodesapi。

在开始之前，我建议你从简单的版本开始，如果你遇到麻烦，可以问一个后续问题。

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/，它已被弃用，但还没有具体日期。