如何从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投影节点,则会变得更加复杂.在这种情况下,您将需要使用节点本身的getDistributedNodesapi <content>.

在开始之前,我建议你从简单的版本开始,如果遇到麻烦,请提出跟进问题.