Stencil: Slot in loop doesn't repeat

[dboscanv]

Stencil version:

 @stencil/core@<0.11.0>

I'm submitting a:

[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
I put two slots in a loop:

{this.data.map((e, idx) =>
                <div class={this.containerButtonsClass}>
                  {this.data.length == idx + 1 ? <button type="button" class={this.buttonClass} onClick={this.addItem.bind(this)}>
                    <slot name="btn-plus">  </slot> // HERE
                  </button> : null}
                  {this.data.length !== 1 ? <button type="button" class={this.buttonClass} onClick={_ => this.removeItem(idx)}>
                    <slot name="btn-minus">  </slot> // HERE
                  </button> : null}
                </div> : null}
            </div>
          )}

The first slot (btn-plus) appear, but only appear once (if I add a element in array, the slot doesn't appear). The other slot, doesn't appear never. For me it's a bug, but perhaps I'm wrong.

Expected behavior:
The slots should be repeat itself.

Other information:

Repository: https://github.com/dboscanv/multiple-values
Link to the file: https://github.com/dboscanv/multiple-values/blob/master/src/components/multiple-values/multiple-values.tsx#L216

Thanks!

[jthoms1]

What are you filling into the slot? I am not sure I understand the use case.

[dboscanv]

Hi @jthoms1

The web component allow to add many group of inputs, each group of inputs has its values, additionaly, there are two buttons, one for add and one for remove a group. So, what I try to do is that the buttons (add or delete) can be will change the innerHTML.

For example, writing in the HTML this:

<multiple-values>
       <i slot="btn-plus" class="icon ion-md-add"></i>
        <i slot="btn-minus" class="icon ion-md-remove"></i>
</multiple-values>

Should be:

But has a wrong behavior:

[brajnacs]

I am also facing the same issue. I have 2 components todo-list and todo-item
todo-item has 2 actions with icons, I want to provide these icons via slots from the todo-list component itself
todo-items is being repeated inside todo-list and I want the action icon slots to be repeated inside every todo item, right now it shows up only on the first element.

[zohon]

I am also facing this issue.

[Vinoth-LearningThings]

Anyone found a solution for this issue? I am also facing the same issue!

[gandhirahul]

I am also facing the same issue. Though this workaround works for me, but would really appreciate doing it the right way.

// Inside the loop.
<span class="inner" innerHTML={elm.outerHTML}> 

[SebaP94]

Hello, any updates here? I have the same issue.

[juliovedovatto]

Still facing same issue 😔

I have a slider carousel component, with 1...N slides and it would be good to set the same content for each slide using a slot.

In the issue #2103, some folks deduced that slots are not for this type of use. Which is kinda bummer.

It would be better if @adamdbradley confirmed this or something in documentation pointing this fact https://stenciljs.com/docs/templating-jsx#slots

[jhairau]

For anyone stuck on this. I found myself creating a work around. Yes we can't use a slot in a loop.

So my solution was to use <slot/> to pass in some DOM, clone that DOM and then use some logic to inject values each loop. It's probably easier to view my code to understand.

https://webcomponents.dev/edit/oEPlhviSVrJMW94FinxW?sv=1

[DmitryEfimenko]

basically people (my-self included) are searching for an alternative of Angular's template references that can be defined expecting some context. and used in the component. Something like render-props, does not quite solve this problem because they don't integrate well with non-jsx things - like Angular. StencilJS does support render props, but I'm not even sure how well that would work when integrating a StencilJS component with React.