如何 dom-repeat 插槽内容

Question

I'm trying create a reusable list that gets it's row template passed in as a slot but the slot content only get repeated once. Example here: https://codepen.io/chris-gunawardena/project/editor/XkPYQw

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">
<dom-module id="list-repeater">
  <template>
      <template is="dom-repeat" items="{{items}}" as="item">
        <li>
          # [[index]]:  [[item]] <slot name="row-template"></slot>
        </li>
    </template>
  </template>
  <script>
    class ListRepeater extends Polymer.Element {
      static get is() {
        return 'list-repeater';
      }
      static get properties() {
        return {
          items: Array,
        };
      }
    }
    customElements.define(ListRepeater.is, ListRepeater);
  </script>
</dom-module>

This gets used like this:

  <list-repeater items='["a","b"]'>
    <div slot="row-template">--slot content--</div>
  </list-repeater>

The functionality is similar to iron-list which takes in a template but having a hard time following what iron-list is doing.

Answer 1

Using slots will not work in your case, iron-list is using Templatizer Behavior to achieve this

The Polymer.Templatizer behavior adds methods to generate instances of templates that are each managed by an anonymous Polymer.PropertyEffects instance where data-bindings in the stamped template content are bound to accessors on itself.

Answer 2

I was also stuck with the same issue and i got one solution for this, you may try this and lemme know if this works for you or not. This approach used a templatizer.

HTML:

<div id="you-component-list"><your-component></you-component><div>

JS:

In attached method add this line:

attached() {
this.templatize(/** @type {!HTMLTemplateElement} **/ (
    this.$.'your-component-list'.querySelector('template')));},

const /** !Array */ flattenedNodes = Polymer.FlattenedNodesObserver.getFlattenedNodes(this); const distributedNodeToAppend = /** !Node */ flattenedNodes.find( (/** !Node */ node) => (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('slot'))); const clone = this.stamp({item: item}); if (distributedNodeToAppend) { const childNode = distributedNodeToAppend.cloneNode(true); childNode.removeAttribute('slot'); clone.root.querySelector('Your-component').appendChild(childNode); } Polymer.dom(this.$.'you-component-list').appendChild(clone.root);