Polymer 1.0 在里面添加了其他聚合物元素答案

【问题标题】：Polymer 1.0 add other polymer elements insidePolymer 1.0 在里面添加了其他聚合物元素
【发布时间】：2015-10-15 23:55:18
【问题描述】：

您好，像这样添加子聚合物元素有什么区别：

<dom-module id="app-element">
    <template>
        <h1>Hello</h1>
        <test-element></test-element>
    </template>
    <script>
        Polymer({
            is: "app-element"
        });
    </script>
</dom-module>
<app-element></app-element>

这很好用。在app-element标签内添加html代码（包括其他聚合物元素）的效果

<app-element>some html here</app-element>

像这样：

 <dom-module id="app-element">
    <template>
        <h1>Hello</h1>

    </template>
    <script>
        Polymer({
            is: "app-element"
        });
    </script>
</dom-module>
<app-element>
    <test-element></test-element>
</app-element>

这会忽略测试元素代码。那么在哪些情况下我可以在聚合物元素中添加 html 代码？什么时候会被忽略？如果您想在 html 代码中的其他聚合物元素中添加聚合物元素，如下所示：

<app-element>
    <test-element></test-element>
</app-element>

??谢谢

【问题讨论】：

标签： javascript html polymer web-component

【解决方案1】：

在您的第一个案例中，您使用 local dom，在第二个 light dom 中。在本地 dom 中，包含它的自定义元素负责内容（在本例中为 app-element）。所以自定义元素的creator决定了本地dom的内容。相比之下，使用 light dom 为自定义元素的 user 提供了指定内容的选项。自定义元素的创建者可以使用 <content></content> 标签指定 light dom 应该在自定义元素内的位置。因此，要使您的第二个示例正常工作，您需要这样的东西：

<dom-module id="app-element">
    <template>
        <h1>Hello</h1>
        <content></content>
    </template>
<script>
    Polymer({
        is: "app-element"
    });
</script>
</dom-module>
<app-element>
    <test-element></test-element>
</app-element>

light dom 的一个示例用例是paper-dialog。使用light dom，对话框的用户可以决定对话框的内容。例如，要使用的具体按钮、对话框的主要内容等。查看文档中的this page，了解有关本地和轻型 dom 的更多信息。

【讨论】：