Clever Geek Handbook

How to add a slot in a re-dominated polymer 2

I want to create a layout element, so I am writing a template like this

    <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>
Run codeHide result


and in the html page file I am using this component like this:

    <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>
Run codeHide result


but the result is not correct when I write the pattern without repeating, this is ok:

<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>
Run codeHide result


Is there a way to add a slot to a repetition?

+3


source to share


1 answer


Try to fold <div class="row">

.



0


source






More articles:


All Articles