Access to all internal elements in Polymer?

Question

I have:

<k-myelement> <k-anotherelement></k-anotherelement> </k-myelement> 

When I define a template as follows:

 <polymer-element name="k-myelement"> <template> <content select="k-anotherelement" id="anotherelement"></content> </template> </polymere-element> 

I can access the inner element using this.$['anotherelement']

But with this approach, I have to predetermine which internal elements can be used.

What I want is a template method that allows me to access all the internal elements.

Answer 1

<content> ( insertion points ) are intended for rendering elements in the light DOM in certain places in the Dadow DOM. Using <content select="k-anotherelement"></content> says: "Output any <k-anotherelement> elements here. If you want all light DOM nodes to be invited towards the rendering side, just use <content></<content> .

Other issues with your snippet:

• The element name must be defined on <polymer-element> , and not as <template name="k-myelement">

• To get a list of nodes passing through <content> , use content.getDistributedNodes() . You can also consider if you even need <content> . Access to the Light DOM baby nodes is via .children and other accessories. From the documents of the Polymer :

  For a <content> you can iterate through content.getDistributedNodes() to get a list of nodes distributed at the insertion point.

  In Polymer, the best place to call this method is the attached() callback, so you guarantee that the item is in the DOM tree.

  Also remember that you can access the light DOM as elements of ordinary children (i.e. this.children , or other accessories). The difference with this approach is that the entire set of potentially distributed nodes; not the ones that were really common.