javascript - 如何从 Polymer 中的 Javascript 访问轻量级 DOM 信息

Question

问题：

在 Web Components 规范中，当您想Light-DOM从模板中读取 a 中的<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.innerHTMLor this.firstChild。

简单模式：

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

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

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

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

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/，它已被弃用，但没有关于何时会发生的日期。