Polymer 1.0 add other polymer elements inside

Question

Hello what is the difference of doing adding a child polymer element like this:

<dom-module id="app-element">
    <template>
        <h1>Hello</h1>
        <test-element></test-element>
    </template>
    <script>
        Polymer({
            is: "app-element"
        });
    </script>
</dom-module>
<app-element></app-element>

This works just fine. The effect of adding html code (including other polymer elements) inside the app-element tag

<app-element>some html here</app-element>

like this:

 <dom-module id="app-element">
    <template>
        <h1>Hello</h1>

    </template>
    <script>
        Polymer({
            is: "app-element"
        });
    </script>
</dom-module>
<app-element>
    <test-element></test-element>
</app-element>

This ignores the test-element code. So in which cases can I add html code inside a polymer element? When will it be ignored? What would be the case where you want to add polymer elements inside other polymer elements inside the html code like this:

<app-element>
    <test-element></test-element>
</app-element>

?? Thank you

Answer 1

In your first case you are using local dom , in the second light dom . In local dom, the custom element that contains it is responsible for the content (in this case app-element). So the creator of the custom element decides the content of the local dom. In contrast, using light dom provides the user of the custom element with the option to specify the content. The creator of the custom element can specify where the light dom should go inside the custom element using the <content></content> tag. So to make your second example work you would need something like this:

<dom-module id="app-element">
    <template>
        <h1>Hello</h1>
        <content></content>
    </template>
<script>
    Polymer({
        is: "app-element"
    });
</script>
</dom-module>
<app-element>
    <test-element></test-element>
</app-element>

An example use case for light dom is the paper-dialog . Using light dom, the user of the dialog can decide the content of the dialog. For example, the specific buttons to use, the main content of the dialog, etc. Have a look at this page in the documentation for more information on local and light dom.