如何使用JavaScript访问DOM光在信息聚合

Question

问：

在Web组件规范，当你想读可以使用<content select></content>元素的模板Light-DOM中的元素。但是，如何从组件的JavaScript代码中检索这些信息？

实施例：

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

由于提前，哈维尔。

Answer 1

我不知道什么模板呈现出来，以DOM中，但也许你可以试试这个：

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

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

Answer 2

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

简单模式：

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

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

这个问题变得更为复杂，如果你正在使用<content>项目通过影子DOM的多层次的节点。在这种情况下，您将需要使用<content>节点本身的getDistributedNodes api。

在开始讨论之前，我建议你先从简单的版本开始，如果遇到问题，可以询问后续问题。

Answer 3

使用this，访问lightDOM和 使用this.shadowRoot访问shadowDOM

Answer 4

您应该能够使用/deep/，它已被弃用，但没有日期何时会发生。