stencil

stencil copied to clipboard

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.

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?

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

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;
    }
 }

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

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