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

Polymer 1.0 add other polymer elements inside

本文关键字：聚合物 其他 元素 在里面 添加      更新时间：2023-09-26

你好，像这样添加子聚合物元素有什么不同:

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

? ?谢谢你

在你的第一种情况下，你是使用本地dom，在第二个轻dom。在local dom中，包含它的自定义元素负责内容(在本例中为app-element)。因此，自定义元素的创建者决定本地dom的内容。相反，使用light dom为自定义元素的用户提供了指定内容的选项。自定义元素的创建者可以使用<content></content>标签指定自定义元素中灯光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。使用光dom，对话框的用户可以决定对话框的内容。例如，具体要使用的按钮，对话框的主要内容等。关于local和light dom的更多信息，请查看文档中的这个页面。

相关文章：