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.org/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!