bug: Nuxt invalid slot management with the SSR capability

[mamillastre]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.27.2

Stencil Framework Output Target

Vue

Stencil Framework Output Target Version

0.9.6

Current Behavior

On Nuxt (3.16.0), we use a Stencil component with 3 slots (default, header, footer).

<MyComponent>
    <span slot="footer">Footer</span>
    Content
    <span slot="header">Header</span>
</MyComponent>

Here the rendering by the server:

And after the client hydration:

The slots are duplicated and not rendered has expected.

Expected Behavior

The slot are rendered has expected during SSR and hydration.
For example, here is the rendering on a Next app:

You can run the Next app on the reproduction repo by runing the npm run nextcommand (instead of npm run nuxt).

Steps to Reproduce

I fork the designsystem-boilerplaterepo to reproduce the bug:

• Clone the below "Code reproduction URL"
• In the root of the project:
• npm i -ws
• npm run nuxt

Code Reproduction URL

https://github.com/mamillastre/stencil-code-reproduction

Additional Information

The client side rendering seems to work just fine except it does not clean the content rendered by the server.
On the server side, the rendering do not work has expected.