Question

我已经开始查看Web组件和shadow 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

你差不多完成了。唯一剩下的就是使用它自己的item s模板。由于item不是网络组件的有效名称，因此以下示例使用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组件内容插入中包含标记

1 个答案: