Polymer 1.0在其中添加其他聚合物元素

Question

你好，添加這樣的子聚合物元素有什么區別：

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

?? 謝謝

Answer 1

在你的第一個案例中，你在第二個燈光dom中使用本地 dom 。 在本地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>

光dom的示例用例是紙對話框 。 使用light dom，對話框的用戶可以決定對話框的內容。 例如，要使用的特定按鈕，對話框的主要內容等。有關本地和輕量dom的更多信息，請查看文檔中的此頁面 。