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:
When I use any stencil components without Shadow Dom, and insert content for slots (default and named) the hydrate not put the content of slots in the correct place in SSR, the code from the SSR is OK, but the error start in the client side.
The code generated before Stencil Hydrate, here the render of the component is OK.
<my-component class="hydrated sc-my-component-h sc-my-component-s" s-id="1">
<!--r.1-->
<!--o.0.1-->
<!--o.0.2-->
<div c-id="1.0.0.0" class="sc-my-component sc-my-component-s">
<!--s.1.1.1.0.-->
<!--t.0.1-->
Default slot
<div c-id="1.2.1.1" class="end sc-my-component sc-my-component-s">
<!--s.1.3.2.0.end-->
<span c-id="0.2" slot="end">
End slot
</span>
</div>
</div>
</my-component>
The code after Stencil Hydrate, here the texts isn't in the correct place.
<my-component class="hydrated sc-my-component-h sc-my-component-s">
<!--r.1-->
<!---->
Default slot
<!----><span slot="end">
End slot
</span>
<div class="sc-my-component sc-my-component-s">
<!--s.1.1.1.0.-->
<div class="end sc-my-component sc-my-component-s">
<!--s.1.3.2.0.end-->
</div>
</div>
</my-component>
Expected behavior:
The default slot to display the "Default slot" text and the named slot to display the "End slot" span.
<my-component>
<div>
Default slot
<div>
<span>
End slot
</span>
</div>
</div>
</my-component>Steps to reproduce:
$ git clone https://github.com/patrickalima98/stencil-slot-bug.git
$ cd stencil-slot-bug
$ npm i
$ node ./server.js
# Open your browser in http://localhost:3333
Related code:
import { Component, h } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: false,
})
export class MyComponent {
render() {
return (
<div>
<slot/>
<div class='end'>
<slot name='end'></slot>
</div>
</div>);
}
}Other information:
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:
When I use any stencil components without Shadow Dom, and insert content for slots (default and named) the hydrate not put the content of slots in the correct place in SSR, the code from the SSR is OK, but the error start in the client side.
The code generated before Stencil Hydrate, here the render of the component is OK.
The code after Stencil Hydrate, here the texts isn't in the correct place.
Expected behavior:
The default slot to display the "Default slot" text and the named slot to display the "End slot" span.
Steps to reproduce:
Related code:
Other information: