通过Polymer中的内容标签访问包含的light DOM

Accessing the light DOM included by means of a content tag in Polymer

本文关键字：包含 访问 light DOM 标签 Polymer 通过      更新时间：2023-09-26

上下文：

我正在Maverics MacOX(10.9.2(&Chrome代理(34.0.1847.131(构建web组件。特别是，我正试图通过content标签来部分丰富其他模板中包含的两个成分(foo和bar(。富集包括添加新的属性，以便在它们各自的内部模板中使用它们(第(3(行和第(4(行(。我不确定这种方法是否能正常工作，这正是我所需要的。但这让我想到了以下问题。

问题：

我正试图通过内容标签从JS访问模板中包含的light-DOM节点。从本质上讲，我的意图可以在下面的片段中描述出来。我需要访问第(1(行和第(2(行中的节点foo和bar：

<polymer-element name="wc-tag"> 
  <template>
     <div id="container">
       <content select="[role='rA']"></content>  
       <content select="[role='rB']"></content>  
     </div>
  </template>
  <script>
     Polymer ('wc-tag',{
        domReady: function () {
           var c  = this.$.container;
           var rA = c.querySelector ('[role="rA"]'); // (1)
           var rB = c.querySelector ('[role="rB"]'); // (2)
           rA.setAttribute ('mode', 'active'); // (3)
           rB.setAttribute ('editable', true); // (4)
           ...
        }
     });
  </script>
</polymer-element>
 <wc-tag>
    <wc-foo role="rA">Foo</wc-foo>
    <wc-bar role="rB">Bar</wc-bar>
 </wc-tag>

然而，在rA和rB中都获得了零值。我已经确认，在评估代码时，content标签尚未解析(content是<div id="container">的两个独生子(。

问题：

有人知道我如何/何时可以/应该访问foo和bar吗？

这里有一个jsbin示例，说明如何使用<content>元素和getDistributedNodes方法来实现这一点。

<polymer-element name="x-foo">
  <template>
    <h1>Hello from x-foo</h1>
    <content id="content" select='[role="rA"]'></content>
  </template>
  <script>
    Polymer('x-foo', {
      domReady: function() {
        var baz = this.$.content.getDistributedNodes()[0];
        baz.setAttribute('active', true);
      }
    });
  </script>
</polymer-element>
<x-foo>
  <div role="rA">rA element</div>
</x-foo>

技巧，我还没有用Polymer完成这项工作，所以这里有一些猜测。让我知道这是否有效(如果不有效，请发布一个jsbin：(

以下是我的理解。在shadow-dom中，<content>节点并不完全具有作为子节点的<wc-foo/bar>元素。这些仍然是光域的一部分，它们只是被有效地复制了一遍。因此，因为您在阴影dom中查询具有role="rA"的元素的this.$.container的子元素，所以您找不到它们，因为它们在灯光dom中。有两个选项：您可以为<content>节点提供标识属性，这样您就可以选择它们，然后对它们调用getDistributedElements((；或者你可以做this.querySelector而不是this.$.container.querySelector。

相关阅读：如何设计分布式节点的样式

相关文章：