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>

预期产出：

bar open
hello
bar closed

我有时得到的东西：

bar open
bar closed
hello

我得到的错误不是100％可重复的。它只发生在我刷新页面的一定百分比。看起来内容越复杂，错误发生的可能性就越大。

似乎聚合物在完全呈现.myContent组件之前尝试选择bar。

Answer 1

您需要通过拨打Polymer()注册新的自定义元素。
此外，正如评论中已经说明的那样，您的自定义元素需要包含一个超级广告。例如：<p-foo>和<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>

嵌套聚合物组件内容问题

1 个答案: