javascript - 通过 Polymer 中的内容标签访问轻型 DOM

Question

上下文:

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

问题:

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

<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"> 的两个唯一的 child )。

问题:

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

Answer 1

这是一个 jsbin example如何使用 <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>