Skip to content

Parent with Child Slot rerender bug #1968

@dutscher

Description

@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 :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bug: ValidatedThis PR or Issue is verified to be a bug within Stencilslot-related

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions