Polymer Light DOM with nested elements

Question

How can I add Light DOM to element without the container element? I am trying to build a custom element that contains iron-pages and would like to pass its content as Light DOM. But, the rendered DOM contains the wrapping causing iron-pages to not work. Is there a way to achieve this? Here’s what I am trying to do. https://plnkr.co/edit/Twa1D4cpCy5HNCSpNxqu?p=preview

<dom-module name="foo-pages">
    <template>
      <div id="sections">
        <content select="[sections]"></content>
      </div>
      <iron-pages id="pages" selected="0">
        <content select="[pages]"></content>
      </iron-pages>
    </template>
</dom-module>


<!-- usage -->
<foo-pages>
    <div sections>
      <paper-button id="btn1" raised>view 2</paper-button>
      <paper-button id="btn2" raised>view 3</paper-button>
    </div>
    <div pages>
      <div for="btn1">one</div>
      <div for="btn2">two</div>
    </div>
</foo-pages>

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

This earlier answer to a slightly different question found the following.

You can only select direct children of the host node, not descendents.

So you would need to make your pages direct children of your host node by removing the wrapper and adding the selection criteria to pages themselves.

<foo-pages>
    <div sections>
        <paper-button id="btn1" raised>view 2</paper-button>
        <paper-button id="btn2" raised>view 3</paper-button>
    </div>
    <div pages for="btn1">one</div>
    <div pages for="btn2">two</div>
</foo-pages>

edited May 23 '17 at 10:29

Community

1
1

answered Mar 03 '17 at 17:45

Maria

5,574
1
29
39

Interesting. That works. A wrapper div would have looked cleaner in my opinion. But I also thought that I can't have duplicate content references (`pages`). I thought as per Custom Elements standards, only the first reference will be picked up and rest will be ignored. Does it still hold good with Polymer 2.0? – kleptomac Mar 03 '17 at 18:01
I agree that the wrapper would be cleaner. Unfortunately there is only little documentation on content selction in the Polymer docs. However, in 2.0 `content` is replaced with `slot` and the docs state that content only be selected by name not with arbitrary selectors. So my guess is that my solution might not work. There is some information in the [upgrade instructions](https://www.polymer-project.org/2.0/docs/upgrade) – Maria Mar 03 '17 at 18:32
If you're looking for slots, [this article](https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#slots) could also be helpful. It's not Polymer specific though, but assume that's how slots going to work in Polymer 2.0 – Maria Mar 03 '17 at 18:37

Polymer Light DOM with nested elements

1 Answers1