Parent with Child Slot rerender bug #1968

dutscher · 2019-10-23T13:55:17Z

Stencil version:

 @stencil/[email protected]
 ---
 update: 15.11.2019
 ---
 @stencil/[email protected]
---
 update: 15.01.2020
 ---
 @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:
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 :)

The text was updated successfully, but these errors were encountered:

NKBelousov · 2019-12-25T21:19:37Z

Just confirmed this myself

@dutscher have you found any workaround?

dutscher · 2020-01-15T10:21:52Z

@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 · 2020-03-03T12:47:35Z

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 · 2021-02-02T06:07:36Z

Facing this in 1.17.3

sajTempler · 2021-03-23T11:54:20Z

possible workaround:
#2036 (comment)

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

This adds a new transformer, `performAutomaticKeyInsertion`, which will add `key` attributes into certain JSX nodes in the `render()` method of a Stencil component. This will allow the Stencil runtime to make more accurate decisions about when to create and destroy child nodes during re-rendering, especially in circumstances where nodes are changing order and so on. There are some limitations on when we can safely insert keys without possibly introducing incorrect behavior. In particular, we don't want to insert keys in the following situations: - when a `render` method has more than one return statement - when a `render` method has a conditional (ternary) expression in it - when a JSX node is located inside of a JSX expression (i.e. within curly braces like `<div>{ ... }</div>`) In each of these cases we don't have the static analysis chops to know when a given JSX syntax tree node is supposed to correspond to the same HTML element at runtime, whereas in the 'single return, JSX children case' like: ```tsx class Component { render () { return <div><img /></div> } } ``` We know without a doubt in this case that the `div` and `img` JSX nodes are always supposed to correspond to the same HTML elements at runtime, so it's no problem to add keys to them. The key insertion transformer also does not transform JSX nodes which are not part of Stencil components, so if a project had, for some reason, a React component or something in it we will leave it alone. fixes #1968 fixes #5263 STENCIL-893

…5143) * test(slot): add karma test for #1968 this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue * feat(runtime): automatically insert `key` attrs during compilation This adds a new transformer, `performAutomaticKeyInsertion`, which will add `key` attributes into certain JSX nodes in the `render()` method of a Stencil component. This will allow the Stencil runtime to make more accurate decisions about when to create and destroy child nodes during re-rendering, especially in circumstances where nodes are changing order and so on. There are some limitations on when we can safely insert keys without possibly introducing incorrect behavior. In particular, we don't want to insert keys in the following situations: - when a `render` method has more than one return statement - when a `render` method has a conditional (ternary) expression in it - when a JSX node is located inside of a JSX expression (i.e. within curly braces like `<div>{ ... }</div>`) In each of these cases we don't have the static analysis chops to know when a given JSX syntax tree node is supposed to correspond to the same HTML element at runtime, whereas in the 'single return, JSX children case' like: ```tsx class Component { render () { return <div><img /></div> } } ``` We know without a doubt in this case that the `div` and `img` JSX nodes are always supposed to correspond to the same HTML elements at runtime, so it's no problem to add keys to them. The key insertion transformer also does not transform JSX nodes which are not part of Stencil components, so if a project had, for some reason, a React component or something in it we will leave it alone. fixes #1968 fixes #5263 STENCIL-893 --------- Co-authored-by: Ryan Waskiewicz <[email protected]>

rwaskiewicz · 2024-01-29T16:01:32Z

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

ionitron-bot bot added the triage label Oct 23, 2019

This was referenced Nov 12, 2019

Virtual DOM bug: <slot /> array on second render #1997

Closed

Slot Changes Re-Rendered in Wrong Location on IE11/Edge #2004

Closed

arielsalminen mentioned this issue Dec 8, 2019

Bug: Client-side hydration moves content out of <slot/> when Hydrate App or --prerender flag is used #2068

Closed

dutscher mentioned this issue Jan 15, 2020

Virtual DOM bug: SSR don't put the content of the slots in correct place in CSR #2036

Closed

johnjenkins mentioned this issue Jul 1, 2021

fix(shadowDomShim): slot behaviour #2938

Closed

alicewriteswrongs mentioned this issue Apr 19, 2023

bug: Slot content went missing within dynamic component #4284

Closed

3 tasks

rwaskiewicz added the Bug: Validated This PR or Issue is verified to be a bug within Stencil label Jul 17, 2023

ionitron-bot bot removed the triage label Jul 17, 2023

rwaskiewicz added the slot-related label Jul 18, 2023

rwaskiewicz added a commit that referenced this issue Jul 28, 2023

test(slot): add karma test for #1968

8c8003c

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Sep 26, 2023

test(slot): add karma test for #1968

0a947b6

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Dec 6, 2023

test(slot): add karma test for #1968

5aa2178

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Dec 6, 2023

test(slot): add karma test for #1968

f6a28b2

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Dec 7, 2023

test(slot): add karma test for #1968

c88abc5

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs mentioned this issue Dec 7, 2023

feat(runtime): automatically insert key attrs during compilation #5143

Merged

2 tasks

alicewriteswrongs pushed a commit that referenced this issue Dec 11, 2023

test(slot): add karma test for #1968

0b94ba2

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Dec 15, 2023

test(slot): add karma test for #1968

4d9342c

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Dec 15, 2023

test(slot): add karma test for #1968

918cfcc

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Jan 3, 2024

test(slot): add karma test for #1968

2d70651

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Jan 8, 2024

test(slot): add karma test for #1968

3295e6c

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

tanner-reits pushed a commit that referenced this issue Jan 9, 2024

test(slot): add karma test for #1968

d9eb592

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Jan 9, 2024

test(slot): add karma test for #1968

034749b

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Jan 17, 2024

test(slot): add karma test for #1968

9db7e59

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Jan 17, 2024

test(slot): add karma test for #1968

c46c1d1

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Jan 17, 2024

test(slot): add karma test for #1968

a732bc6

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Jan 22, 2024

test(slot): add karma test for #1968

78c660e

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Jan 24, 2024

test(slot): add karma test for #1968

2f237a3

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs pushed a commit that referenced this issue Jan 26, 2024

test(slot): add karma test for #1968

349df98

this commit adds a karma test for #1968, based on the minimal reproduction case that we received for said issue

alicewriteswrongs closed this as completed in #5143 Jan 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Parent with Child Slot rerender bug #1968

Parent with Child Slot rerender bug #1968

dutscher commented Oct 23, 2019 •

edited

Loading

NKBelousov commented Dec 25, 2019

dutscher commented Jan 15, 2020 •

edited

Loading

dutscher commented Mar 3, 2020

Aswathprabhu commented Feb 2, 2021

sajTempler commented Mar 23, 2021

rwaskiewicz commented Jan 29, 2024

Parent with Child Slot rerender bug #1968

Parent with Child Slot rerender bug #1968

Comments

dutscher commented Oct 23, 2019 • edited Loading

NKBelousov commented Dec 25, 2019

dutscher commented Jan 15, 2020 • edited Loading

dutscher commented Mar 3, 2020

Aswathprabhu commented Feb 2, 2021

sajTempler commented Mar 23, 2021

rwaskiewicz commented Jan 29, 2024

dutscher commented Oct 23, 2019 •

edited

Loading

dutscher commented Jan 15, 2020 •

edited

Loading