Nested Polymer Components Content Issue

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.

Answers:

Answer
  1. You need to register your new custom elements with a call to Polymer().

  2. 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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.