Slot inside iteration or loop

[Vinoth-LearningThings]

Stencil version:

@stencil/core@1.8.1

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:
Slot inside a loop works for the 1st iteration but not the following ones.

Expected behavior:
Slot inside a loop should work for all the iterations.

Steps to reproduce:

Below is my stencil component.

import { Component, h, State } from "@stencil/core";

@Component({
  tag: "list-body",
  styleUrl: "list-body.scss",
  shadow: false
})
export class Body {
  @State() data: Array<String> = ["James", "Carol"];

  render() {
    return (
      <div>
        <p>Teachers</p>
        {this.data.map(entry => {
          return (
            <div>
              <slot name="salutation"></slot>
              <span>{entry}</span>
            </div>
          );
        })}
      </div>
    );
  }
}

<list-body>
    <span slot="salutation">Prof.</span>
</list-body>

Expected Result:

<list-body class="hydrated">
    <!---->
    <div>
        <p>Teachers</p>
        <div><span slot="salutation">Prof.</span><span>James</span></div>
        <div><span slot="salutation">Prof.</span><span>Carol</span></div>
    </div>
</list-body>

Actual Result

<list-body class="hydrated">
    <!---->
    <div>
        <p>Teachers</p>
        <div><span slot="salutation">Prof.</span><span>James</span></div>
        <div><span>Carol</span></div>
    </div>
</list-body>

I am not clear if I am doing anything illogical. I really appreciate the help. Thanks in advance!

[adamdbradley]

Is this for all browsers or just IE11 or old edge?

[juanmiguelbesada]

Does make sense use multiple slots with same name?

[xLama]

Seems related to #990

[cary-smith]

@Vinoth-LearningThings - I may be missing something in this scenario, but I think that may be a misused of named slots. The slot is intended as a key-value pairing under normal circumstances for dom placed inside a component (not part of its template but should go into a specific location).

Conceptually (again I may be missing something here) if you want:

<list-body class="hydrated">
    <!---->
    <div>
        <p>Teachers</p>
        <div><span slot="salutation">Prof.</span><span>James</span></div>
        <div><span slot="salutation">Prof.</span><span>Carol</span></div>
    </div>
</list-body>

...should not the render be:

render() {
    return (
      <div>
        <p>Teachers</p>
        {this.data.map(entry => {
          return (
            <div>
              <span slot="salutation">Prof.</span>
              <span>{entry}</span>
            </div>
          );
        })}
      </div>
    );
}

[stanley85]

In the best case one would have the salutation for each teacher in the data. In this case using named slots to transport values is the wrong way. Have a property @Prop() salutation: string = "" on the list-body element <list-body salutation="Prof." /> the listbody can add the value of this.salutation to each JSX per teacher. <span>{this.salutation}</span>

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!