嵌套聚合物组件内容问题

Nested Polymer Components Content Issue

本文关键字：问题 组件 聚合物 嵌套      更新时间：2023-09-26

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%可重复的。这种情况只占我刷新页面的百分比。此外，内容越复杂，出现错误的几率就越高。

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

  1. 您需要通过调用Polymer()来注册新的自定义元素。

  2. 此外，正如在注释中所述，您的自定义元素需要包含一个hypen。例如：<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>
相关文章：