Polymer 我是否可以对开槽内容使用dom repeat将每个开槽子项包装到某个标记中？

我想使用

dom repeat

将一组子节点包装在

标记中。问题是，我要重复的节点本身是自定义元素，通过插槽插入，而且dom repeat似乎只接受通过属性传递的数据

我想做的是：

<dom-module id="my-custom-element">
  <template>
    <section>
      ...
      <ul>
        <dom-repeat items="{{ TOP-LEVEL NODES IN LIST SLOT }}">
          <template>
            <li>{{ item }}</li>
          </template>
        </dom-repeat>
      </ul>
    </section>
  </template>
</dom-module>

...

{{item}}

使用它：

<my-custom-element>
  <ul slot="LIST">
    <my-other-custom-element></my-other-custom-element>
    <my-other-custom-element></my-other-custom-element>
    <my-other-custom-element></my-other-custom-element>
  </ul>
</my-custom-element>

我不认为这是最好的聚合物方法，但它是有效的：

  <x-foo>
    <ul slot="list">
      <div> hi </div>
      <div> hello </div>
      <div> bye </div>
    </ul>
  </x-foo>

  <dom-module id="x-foo">
    <template>
      <h2> The raw slotted items </h2>
      <slot name="list" id="list"></slot>
        <h2> The slotted list items wrapped with 'li' </h2>
      <ul id="styledList"></ul>
    </template>
  </dom-module>

你好
你好
再见

原始项目
用“li”包装的开槽列表项

这里是诀窍：

 class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get properties() {
      return {
        items: {
          type: Array,
          value: function() {
            return [1, 2, 3, 4]
          }
        }
      };
    }

    connectedCallback() {
      super.connectedCallback();
      this.$.list.addEventListener('slotchange', (e) => this.bindSlottedItems() );
    }

    bindSlottedItems() {
        let items = this.$.list.assignedNodes({flatten: true})[0].childNodes;
        items = [].slice.call(items)
        this.$.styledList.innerHTML = items.filter((item) => item.outerHTML).map((item) => {
          return `<li> ${item.outerHTML} </li>`
        }).join('');
    }
  }
  customElements.define(XFoo.is, XFoo);

XFoo类扩展了Polymer.Element{
静态get是（）{return'x-foo'；}
静态获取属性（）{
返回{
项目：{
类型：数组，
值：函数（）{
返回[1,2,3,4]
}
}
};
}
connectedCallback（）{
super.connectedCallback（）；
this.$.list.addEventListener（'slotchange'，（e）=>this.bindSlottedItems（））；
}
bindSlottedItems（）{
让items=this.$.list.assignedNodes（{flatte:true}）[0].childNodes；
items=[].slice.call（items）
this.$.styledList.innerHTML=items.filter（（item）=>item.outerHTML）.map（（item）=>{
返回`
${item.outerHTML}
`
}).加入（“”）；
}
}
customElements.define（XFoo.is，XFoo）；

---

我不确定这是否与您想要做的类似，但我很久以前就制造了一种类似的装置，如果您愿意，请看这里：。我所做的基本上是取一个

槽

（外部定义）并在元素内部的

dom repeat

中重复它。请记住，我发送的项目是建立在Polymer 2.x的预发布版本上的，所以我不能完全确定它是否仍能按预期工作。