在 Web 组件内容插入中包含标记

Question

我已经开始研究 Web 组件和影子 DOM 并设置了一个简单的演示。我注意到，通过在我的 <template></template> 中设置一个插入点并将其多次包含在主机中，它将针对模板中的一个引用遍历每次出现。

    <template>
        <content select="item"></content> <!-- will include multiple instances of item -->
    </template>

    <fancy-list>
        <item>test</item>
        <item>test 2</item>
    </fancy-list>

这让我开始考虑简化主机中的标记并添加一些结构，几乎就像它是自己的组件一样。

这是我目前使用的方法：

    <template id="fancyList">
        <ul>
            <content select="item"></content>
        </ul>
    </template>


    <fancy-list class="fancyList">
        <item><li><span>test</span></li></item>
        <item><li><span>test 2</span></li></item>
    </fancy-list>

这可行，但是我必须在主机内指定一个项目的标记，这感觉违反了 Web 组件的整个概念。有谁知道这样的事情是否可能：

    <template id="fancyList">
        <ul>
            <content select="item"><li><span></span></li></content>
        </ul>
    </template>


    <fancy-list class="fancyList">
        <item>test</item>
        <item>test 2</item>
    </fancy-list>

理想情况下，我想将任何标记结构移动到仅允许 <item> 尽可能简单的模板。

Answer 1

你快完成了。唯一剩下的就是为 items 使用它自己的模板。由于 item 不是 Web 组件的有效名称，下面的示例使用 fancy-list-item:

<polymer-element name="fancy-list-item" noscript>
  <template>
    <li><content></content></li> <!-- style as you want -->
  </template>
</polymer-element>
<polymer-element name="fancy-list" noscript>
  <ul>
    <template>
      <content select="fancy-list-item"></content>
    </template>
  </ul>
</polymer-element>


<fancy-list>
  <fancy-list-item>test</fancy-list-item>
  <fancy-list-item>test 2</fancy-list-item>
</fancy-list>

希望对您有所帮助。

在 Web 组件内容插入中包含标记

Include markup in web component content insertion

web-component

shadow-dom