Nested Polymer Components Content Issue

Question

foo.html:

<link rel="import" href="bar.html">
<dom-module id="p-foo">
    <template>
        <p-bar>
            <content select=".myContent"></content>
        </p-bar>
    </template>
    <script>
        Polymer( {
            is: 'p-foo',
        } )
    </script>
</dom-module>

bar.html:

<dom-module id="p-bar">
    <template>
        bar open
        <content select=".myContent"></content>
        bar closed
    </template>
    <script>
        Polymer( {
            is: 'p-bar',
        } )
    </script>
</dom-module>

demo.html:

<!DOCTYPE html>
<html>
    <head>    
        ...
        <link rel="import" href="foo.html">
    </head>
    <body>
        <p-foo><div class="myContent"><strong>hello</strong></div></p-foo>
    </body>
</html>

The expected output:

bar open
hello
bar closed

What I sometimes get:

bar open
bar closed
hello

The error I am getting is not 100% reproducible. It only happens a percentage of the time I refresh the page. It also appears that the more complicated the content is the higher chance of the error occurring.

It seems that polymer tries to select .myContent before the bar component is has completely rendered.

Some error in the example you pasted above. Ignoring the fact that an element cannot be named as foo and bar (missing hypen -) bar open and bar closed will be printed as you have used selector in content tag. Can you please provide some more relevant example to reproduce the problem as i've not been able to do so even once. — a1626
@a1626 I think you mean that bar open and bar closed will not be printed because it's not being distributed to any <content> — Tomasz Pluskiewicz
@TomaszPluskiewicz yes. With current code content tag will only look for things with class myContent and render it. Anything other than that it will ignore. — a1626
I messed up the example, I updated the example, bar open and bar closed were not supposed to be inside the <content> tag. That was not the issue though. I still don't know why it does this. — user1325159

Supersharp Supersharp · Accepted Answer · 2016-09-14T07:07:07

You need to register your new custom elements with a call to Polymer().
Also, as already stated in comments, your custom elements need to contain an hypen. For example: <p-foo>and <p-bar>.

foo.html:

<link rel="import" href="bar.html">
<dom-module id="p-foo">
    <template>
        <p-bar>
            <content select=".myContent"></content>
        </p-bar>
    </template>
    <script>
        Polymer( {
            is: 'p-foo',
        } )
    </script>
</dom-module>

bar.html:

<dom-module id="p-bar">
    <template>
        bar open
        <content select=".myContent"></content>
        bar closed
    </template>
    <script>
        Polymer( {
            is: 'p-bar',
        } )
    </script>
</dom-module>

demo.html:

    <head>    
         ...
        <link rel="import" href="foo.html">
    </head>
    <body>
        <p-foo><div class="myContent"><strong>hello</strong></div></p-foo>
    </body>
</html>

Nested Polymer Components Content Issue

1 Answers