CODEWITHSUNDEEP
javascriptdompolymer
Squis
Squis

Reputation: 931

How do I select nodes in Polymer without using ID?

I'd like to use the content multiple times, but in different arrangements. Simply copying all content child nodes into each occurrence (as seen here: Polymer Duplicate Element Content) won't do the trick, and I can't use the querySelector for ID, since each content child node is supposed to be copied into multiple elements.

index.html:

...
<body>
    <my-list>
        <div class="first">This is first.</div>
        <div class="second">This is second.</div>
        <div class="third">This is third.</div>
    </my-list>
</body>

So I'd want something like this for my my-list.html, but I don't know how to select elements that don't have an ID:

<dom-module id="my-list">
    <template>
        <div>
            <div class="first"></div>
            <div class="second"></div>
            <div class="third"></div>
        </div>
        <div> <!-- same elements, different layout -->
            <div class="second"></div>
            <div class="third"></div>
            <div class="first"></div>
        </div>
    </template>
</dom-module>

<script>
    Polymer({
        is: "my-list",
        domReady: function() {
            // copy each content child node into the divs with the same class
        }
    });
</script>

There's no interaction on the page, so I'm not concerned about data binding.

Upvotes: 0

Views: 531

Answers (1)

Neil John Ramal
Neil John Ramal

Reputation: 3734

You can use Polymer.dom(node). An example would be

Polymer.dom(this).querySelector('.first');

Upvotes: 1

Related Questions