Question

上下文：

我在Maverics MacOX（10.9.2）上使用聚合物（0.2.4）＆amp; Chrome代理（34.0.1847.131）构建Web组件。特别是，我试图通过foo标记部分丰富其他模板中包含的两个组件（bar和content）。丰富包括添加新属性以在它们各自的内部模板中使用它们（第（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？

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>

Answer 2

整蛊，我还没有用聚合物做到这一点，所以这里有一些猜测。如果这样可行，请告诉我（如果没有，请发布jsbin）

这是我的理解。在影子dom中，<content>节点并不完全具有<wc-foo/bar>元素作为子节点。这些仍然是光明的一部分，它们只是被有效地复制过来。所以，因为你在{阴影dom'中查询了this.$.container的{{1}}元素的role="rA"元素，因为它们在光明的dom中找不到它们。有两个选项：您可以让<content>个节点识别属性，以便您可以选择它们，然后在它们上面调用getDistributedElements();或者你可以this.querySelector而不是this.$.container.querySelector。

相关阅读：How to style distributed nodes

通过Polymer中的内容标记访问包含的轻DOM

2 个答案: