Parent with Child Slot rerender bug

[dutscher]

Stencil version:

 @stencil/core@1.7.4
 ---
 update: 15.11.2019
 ---
 @stencil/core@1.8.0
---
 update: 15.01.2020
 ---
 @stencil/core@1.8.5

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:
Here is a demo: https://dutscher.github.io/stencilslots/

Here is the code which doesnt work from with comments

render() {
    const classes = [];

    if (this.disabled) {
      classes.push(`${this.componentName}--disabled`);
    }

    return (
      <Host class={classes.join(' ')}>
        Demonstrate slot rerender bug
        {/* this dont rerender slot */}
        <div>
          {/* remove condition: works */}
          {/* wrap with <div />: works */}
          {this.disabled && !!this.tag && (
            <div class="tag" innerHTML={this.tag}/>
          )}
          {/* remove div: works */}
          <div>
            before slot&gt;
            <slot/>
            &lt;after slot
          </div>
        </div>
      </Host>
    );
  }

The <slot /> renders first very well, when a rerender in the parent happens, the <slot /> going away. There is a ugly workarround, you can put a <div />. But logical you dont need this <div/>.
https://github.com/dutscher/stencilslots/blob/master/src/components/parent-workaround/parent.tsx

I got a scenario there i need more than one <div />.

I guess its a vdom diff problem.

Expected behavior:
TSX works without extra empty <div /> and the <slot /> is rendered after parent is rerendered.

Steps to reproduce:
https://dutscher.github.io/stencilslots/

Related code:
https://github.com/dutscher/stencilslots/blob/master/src/components/parent-broken/parent.tsx
https://github.com/dutscher/stencilslots/blob/master/src/components/parent-workaround/parent.tsx

Cheers and thanks for the attention :)

[NKBelousov]

Just confirmed this myself

@dutscher have you found any workaround?

[dutscher]

@NKBelousov the worked workarround was, to add enough

or use booleans in your jsx conditions.

I updated the master with 1.8.5. The problem is still there!

https://dutscher.github.io/stencilslots/

cheers

[dutscher]

updated to 1.8.10 and no fix for this.
add enough

around the slot's fixxes is but its not the fine english way.

cheers

[Aswathprabhu]

Facing this in 1.17.3

[sajTempler]

possible workaround:
#2036 (comment)

[rwaskiewicz]

The fix for this issue has gone out in today's v4.12.0 release