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

【问题标题】：Include markup in web component content insertion在 Web 组件内容插入中包含标记
【发布时间】：2015-02-05 11:52:59
【问题描述】：

我已经开始研究 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> 尽可能简单。

【问题讨论】：

标签： web-component shadow-dom

【解决方案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>

希望对你有帮助。

【讨论】：