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.

回答1:

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>

来源：https://stackoverflow.com/questions/39460592/nested-polymer-components-content-issue

标签

javascript

polymer

shadow-dom