javascript - 如何从 Polymer 中的 Javascript 访问 light DOM 信息

Question

问题:

在 Web Components 规范中，当您想要读取 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原型(prototype)方法内部指的是元素本身。 IOW，就像你可以做的一样element.innerHTML或 element.firstChild你可以写this.innerHTML或 this.firstChild .

简单模式:

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

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

如果您使用 <content>，这会变得更加复杂通过多层次的 Shadow DOM 来投影节点。在这种情况下，您需要使用 getDistributedNodes API 的 <content>节点本身。

在开始之前，我建议您从简单的版本开始，如果您遇到麻烦，请提出后续问题。