Let's say I've defined two custom Polymer elements

<!-- Define inner elements -->
<polymer-element name="child-el" attributes="foo">
    <script>
        Polymer('child-el', {
            /* -- Attributes ------------------------------------------------ */
            foo: 'qux'

            /* -- Lifecycle ------------------------------------------------- */
            created: function() {
                console.log('Creating a Child');
            },
            /* -- Public Methods -------------------------------------------- */
            getFoo: function() {
                return [this.foo];
            }
        });
    </script>
</polymer-element>

<!-- Define custom element -->
<polymer-element name="parent-el">
    <script>
        Polymer('parent-el', {
            /* -- Lifecycle ------------------------------------------------- */
            created: function() {
                console.log('Creating a Container');
            },
            ready: function() {
                // This is the part that doesn't seem to work
                console.log(this.children[0].getFoo());
            }
        });
    </script>
</polymer-element>

And then in the markup which uses these elements:

<container>
    <child foo="bar"></child>
    <child foo="baz"></child>
</container>

As I've mented in the code I'd like to use the methods and/or attributes of the custom element child nodes of the custom element (not the child nodes of a template). Naturally, I'm aware there will be more than simply looping through an array, but at this point I'm not entirely sure how to essentially access each of the custom children as their Polymer types.

I hope that makes sense.

Thanks!

Let's say I've defined two custom Polymer elements

<!-- Define inner elements -->
<polymer-element name="child-el" attributes="foo">
    <script>
        Polymer('child-el', {
            /* -- Attributes ------------------------------------------------ */
            foo: 'qux'

            /* -- Lifecycle ------------------------------------------------- */
            created: function() {
                console.log('Creating a Child');
            },
            /* -- Public Methods -------------------------------------------- */
            getFoo: function() {
                return [this.foo];
            }
        });
    </script>
</polymer-element>

<!-- Define custom element -->
<polymer-element name="parent-el">
    <script>
        Polymer('parent-el', {
            /* -- Lifecycle ------------------------------------------------- */
            created: function() {
                console.log('Creating a Container');
            },
            ready: function() {
                // This is the part that doesn't seem to work
                console.log(this.children[0].getFoo());
            }
        });
    </script>
</polymer-element>

And then in the markup which uses these elements:

<container>
    <child foo="bar"></child>
    <child foo="baz"></child>
</container>

As I've mented in the code I'd like to use the methods and/or attributes of the custom element child nodes of the custom element (not the child nodes of a template). Naturally, I'm aware there will be more than simply looping through an array, but at this point I'm not entirely sure how to essentially access each of the custom children as their Polymer types.

I hope that makes sense.

Thanks!

• javascript
• polymer
• web-ponent

2 Answers 2

The safest time to access an element's light DOM children is in the domReady() callback. created/ready/attached nay be too early because the element is not yet guaranteed to be in the DOM and children upgraded.

• http://www.polymer-project/resources/faq.html#zerochildren
• http://www.polymer-project/docs/polymer/polymer.html#lifecyclemethods

Note: "container" and "child" are not valid custom element names. You need a "-" somewhere in the name. So "container-element" or "child-el" would be fine.

After an answer and brief discussion with @ebidel I came up with the full solution to my problem. Basically, I wanted to access child Polymer elements of a parent Polymer element within the parent's code, but ultimately I ended up doing it the other way around.

The lesson is that by the time domReady is called, the elements have been upgraded to include the methods which you've defined. Bueno.

<!-- Define inner elements -->
<polymer-element name="child-el" attributes="foo">
    <script>
        Polymer('child-el', {
            /* -- Attributes ------------------------------------------------ */
            foo: 'qux'

            /* -- Lifecycle ------------------------------------------------- */
            created: function() {
                console.log('Creating a Child');
            },
            ready: function () {
                // Not ready to access this.parentNode at this point
            },
            domReady: function () {
                this.async(function () {
                    // By this point this.parentNode is upgraded according to
                    // http://www.polymer-project/resources/faq.html#zerochildren
                    this.parentNode.doFooWithChild(this);
                });
            /* -- Public Methods -------------------------------------------- */
            getFoo: function() {
                return [this.foo];
            }
        });
    </script>
</polymer-element>

<!-- Define custom element -->
<polymer-element name="parent-el">
    <script>
        Polymer('parent-el', {
            /* -- Lifecycle ------------------------------------------------- */
            created: function() {
                console.log('Creating a Container');
            },
            ready: function() {
                // Not ready to access this.children at this point
            },
            doFooWithChild: function(child) {
                console.log(child.getFoo());
            }
        });
    </script>
</polymer-element>

Thanks for the help!