Polymer 将内容元素中的自定义元素与聚合一起使用

我正在努力掌握聚合物和阴影dom。在处理动态内容时，是否可以在自定义元素中使用自定义元素？例如，在WordPress中，我可以使用

列出我的菜单链接。如果我为菜单创建了一个

元素，我将如何在每个

周围包装另一个自定义元素

这是我的主菜单html文件：

<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-header-panel/core-header-panel.html">
<link rel="import" href="/components/core-toolbar/core-toolbar.html">
<link rel="import" href="/components/paper-tabs/paper-tabs.html">

<polymer-element name="main-menu">
<template>
<style>

.main-menu ::content ul li {
  float: left;
  list-style-type: none;
  margin-left: 20px;
}

core-header-panel {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; 
}
core-toolbar {
  background: #03a9f4;
}

core-toolbar ::content ul li a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
}

</style>

<core-header-panel>
  <core-toolbar>
    <div class="main-menu">
      <paper-tabs>
        <content select="li"><paper-tab></paper-tab></content>
      </paper-tabs>
    </div>
  </core-toolbar>
</core-header-panel>

</template>
<script>
Polymer({});
</script>
</polymer-element>

.主菜单：：内容ul li{
浮动：左；
列表样式类型：无；
左边距：20px；
}
芯头面板{
身高：100%；
溢出：自动；
-webkit溢出滚动：触摸；
}
核心工具栏{
背景#03a9f4；
}
核心工具栏：：内容ul li a{
颜色：白色；
文字装饰：无；
字体大小：14px；
文本转换：大写；
}
聚合物（{}）；

---

显然，使用

并不能完成我想要做的事情，但我不确定如何将

包装到每个

在本例中，您需要使用
getDistributedNodes
方法获取所有
li
并将它们转换为一个数组，并将其交给重复模板。此线程有更多的解释：

下面是一个例子（）：


：主持人{
显示：块；
}
：：内容>*{
显示：无；
}
{{item.textContent}
聚合物({
项目：[]，
domReady:function（）{
//.array（）是由Polymer添加的一种快速转换方法
//数组的节点列表
this.items=this.$.c.getDistributedNodes（）.array（）；
}
});



在本例中，您需要使用
getDistributedNodes
方法获取所有这些
li
s，将它们转换为一个数组，并将其交给一个重复模板。此线程有更多的解释：

下面是一个例子（）：


：主持人{
显示：块；
}
：：内容>*{
显示：无；
}
{{item.textContent}
聚合物({
项目：[]，
domReady:function（）{
//.array（）是由Polymer添加的一种快速转换方法
//数组的节点列表
this.items=this.$.c.getDistributedNodes（）.array（）；
}
});




<polymer-element name="main-menu">
  <template>
    <style>
      :host {
        display: block;
      }
      ::content > * {
        display: none;
      }
    </style>
    <content id="c" select="li"></content>
    <paper-tabs>
      <template repeat="{{item in items}}">
        <paper-tab>{{item.textContent}}</paper-tab>
      </template>
    </paper-tabs>
  </template>
  <script>
    Polymer({
      items: [],
      domReady: function() {
        // .array() is a method added by Polymer to quickly convert
        // a NodeList to an Array
        this.items = this.$.c.getDistributedNodes().array();
      }
    });
  </script>
</polymer-element>

<main-menu>
  <li><a href="#">Foo</a></li>
  <li><a href="#">Bar</a></li>
  <li><a href="#">Baz</a></li>
</main-menu>