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>
<slot/>
<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 :)
Stencil version:
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
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 :)