web - 如何在 polymer 2 中的重复 dom 中添加插槽

Question

我想创建一个布局元素，所以我这样写模板

    <template>
        <div class="row">
            <template is="dom-repeat" items="[[cols]]">
                <div class$="col-[[item]]">
                    <slot id="id[[index]]" name="id[[index]]">no value</slot>
                </div>
            </template>
        </div>
    </template>

在 html 页面文件中，我这样使用这个组件:

    <tcpc-row>
      <span slot="id0">cc id-tcpc-col-0 </span>
      <span slot="id1">cc id-tcpc-col-1 </span>
      <span slot="id1">cc id-tcpc-col-3 </span>
    </tcpc-row>

但是我的结果是不正确的，当我写模板时不重复是可以的，像这样:

<template>
    <div class="row">
        <div class="col-3">
            <slot name="id0"></slot>
        </div>
        <div class="col-3">
            <slot name="id1"></slot>
        </div>
        <div class="col-3">
            <slot name="id2"></slot>
        </div>
        <!--<template is="dom-repeat" items="[[cols]]">
            <div class$="col-[[item]]">
                <slot id="id[[index]]" name="id[[index]]">no value</slot>
            </div>
        </template>-->
    </div>
</template>

有没有办法在repeat中添加slot？

Answer 1

尝试插入 <div class="row"> .