Accessing elements inside dom-repeat in attached

Question

I would like to to have access to the elements inside of a dom-repeat. Here, el returns empty array:

<dom-module id="child-element">
    <template>
        <div id="ida">
            <ul>
                <template is="dom-repeat" items="{{user}}" id="items">
                    <li class = "classa">{{item.name}}</li>
                </template>
            </ul>
        </div>
    </template>

    <script>
        ChildElement = Polymer({
            is: 'child-element',
            factoryImpl(users) {
                this.user = users;
            },
            properties: {
                user: {
                    type: Array
                }
            },
            attached: function() {
                var el = Polymer.dom(this.root).querySelectorAll("#ida .classa");
                console.log("el",el);
            }
        });
    </script>
</dom-module>

How can I access the dynamically created elements inside the dom-repeat from elsewhere in Polymer?

Here is a link to the the full version.

Answer 1

When attached is called the children may not be initialized yet. Wrap your code in an async function.

attached:function(){
  this.async(function() {
   // access sibling or parent elements here
     var el = Polymer.dom(this.root).querySelector("#ida .classa");
     console.log("el",el);
  });
}

This is documented in the Developer guide