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

问题

Context:

I am working with polymer (0.2.4) on Maverics MacOX (10.9.2) & Chrome agent (34.0.1847.131) building up web components. Particularly, I am trying to partially enrich two components (foo and bar) included in other template by means of a content tag. The enrichment consists of adding new attributes for using them within their respective inner templates (lines (3) and (4)). I am not sure whether this approach will work properly which is what I need. But it gets me to the following problem.

Problem:

I am trying to access from JS the light-DOM nodes included in a template by a content tag. Essentially my intention can be depicted in the following snippet. I need to access nodes foo and bar in lines (1) and (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>

Nevertheless, a null value is obtained in both rA and rB. I have confirmed that when code is evaluated, the content tags have not been resolved yet (content are the two only children with <div id="container">).

Question:

Does anybody knows how/when could/should I access foo and bar?

回答1:

Tricky, I haven't done this with Polymer yet so there's a bit of speculation here. Let me know if this works (and post a jsbin if it doesn't :)

Here's my understanding. In the shadow dom, the <content> nodes don't exactly have the <wc-foo/bar> elements as children. Those are still part of the light dom, they're just effectively copied over. So because you're querying for children of this.$.container in the shadow dom for elements with role="rA" you won't find them because they're in the light dom. Two options: you could give the <content> nodes identifying attributes so you can select them and then call getDistributedElements() on them; or you could do this.querySelector rather than this.$.container.querySelector.

Related reading: How to style distributed nodes

回答2:

Here's a jsbin example of how to do this using <content> elements and the getDistributedNodes method.

<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>

来源：https://stackoverflow.com/questions/23727825/accessing-the-light-dom-included-by-means-of-a-content-tag-in-polymer

标签

javascript

templates

polymer