Slot name is not updated when it is bind to a prop

[mergin]

Stencil version:

 @stencil/[email protected]

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:

The slot name is not updated when it is bind to a prop, so it can show only the slotted element that matches de name.

<slot name={this.prop}><slot/>

Then, in the HTML

<cmp-content>
  <div slot="tab1">
    Content Tab 1
  </div>
  <div slot="tab2">
    Content Tab 2
  </div>
  <div slot="tab3">
    Content Tab 3
  </div>
</cmp-content>

Expected behavior:

The slot name should dynamically change.

Steps to reproduce:

Other information:

This used to work in versions <2.0.0. After upgrading my repo to version 2.6.0, this stopped working.

[splitinfinities]

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now.

Could we get a reproduction case? Are you using scoped component or shadow components?

[OscarBouwmans]

I also ran into this issue a while back, so I could make a repro case:

• Create a new Stencil component
• Add a @State() slotName = 'repro';
• Define the render function as render() { return <slot name={ this.slotName }></slot> }
• Run this.slotName = 'changed'; after component is rendered for the first time
• Result in DOM: <slot name="repro"></slot>
• Expected result in DOM: <slot name="changed"></slot>

Here's a codesandbox of it:
https://codesandbox.io/s/stenciljs-dynamic-slotname-issue-2-4-0-eoqh6?file=/src/index.html

There's also a workaround in there, which works by embedding the slot into another element using innerHTML.

And here it is working as expected in Stencil <2, as mentioned by @mergin:
https://codesandbox.io/s/stenciljs-dynamic-slotname-working-v1-17-4-x5sgg?file=/src/index.html

[George-Payne]

Here is an alternative workaround, if innerHTML doesn't suit your needs (assumes there is a single slot):

// workaround for https://github.com/ionic-team/stencil/issues/2982
@Watch('active') updateActive(active?: string) {
    if (!active) return;
    
    const slot = this.host.shadowRoot?.querySelector('slot');
    if (slot) {
        slot.name = active;
    }
 }

[rwaskiewicz]

I was able to reproduce this issue, much thanks @OscarBouwmans for the reproduction case! I'm going to label this to get ingested into the team's backlog

[alicewriteswrongs]

The fix for this was just released today in Stencil v4.12.1!