How to access inner polymer elements from outer polymer element

Question

I want to define a new element <my-table> with can contain a number of columns <mytable-col> The usage should look like this:

<my-table id="mt1">
 <mytable-col id="c1" title ="name" type="string"width="150"></mytable-col>
 <mytable-col id="c2" title ="age" type="number" width="60"></mytable-col>
</my-table>

Is it possible to define an element with another (required) new "inner" element? How is it possible to access from the dart code of the outer the markup of the inner elements instances.

If both the template of <my-table> and <mytable-col> contain markup, where is the markup of the inner <mytable-col> inserted?

Answer 1

The way you wrote your markup the <mytable-col> elements are children of <my-table> which are added to the <content> node inside your <my-table> element.

You can access those child elements from the code of your <mytable-col> like

var listContent = ($['content'] as ContentElement).getDistributedNodes();

I'm not sure what you mean by

Is it possible to define an element with another (required) new "inner" element?

You can add code in your enteredView() method (after the super.enteredView(); call that verifies that the right child nodes are available in the <content> node and throws an exception if not.

where is the markup of the inner inserted?

The markup is inserted into it's elements shadowDOM.
The markup changes the appearance of your element but is normally not visible,
for example when your open view source from your browser (except when you enable the option to show shadowDOM in Chromium/Dartium or your browser doesn't support shadowDOM then you see how polyfills try to emulate shadowDOM).

You can compare it with tags like <video> where just adding this tag creates many elements (like play-, stop-, continue-, fast-forward- buttons and <span>s and <div>s for the layout that are added behind the scenes which are responsible for the layout and behavior of the <video> tag but are not visible in the markup.

Answer 2

with @Günter Zöchbauer ´s help I found the solution:

As he wrote you can get the inner HTML with:

var listContent = ($['content'] as ContentElement).getDistributedNodes();

Because this only finds Nodes with an id, you have do define the Element in the Component´s HTML with an id too.

<content id = content><span>inner HTML</span></content>