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

2.16.1

Current Behavior

I am trying to setup an express server, which recieves an html string from a proxied server, prerenders the components on it and returns the result to the client.
The problem is, that some components don't seem to get re-hydrated correctly on the client. More specifically it seems to not recognize components, which are slotted inside other components.

Having the following code structure:

<app-section>
      <app-banner>...</app-banner>
</app-section>

Leads to the app-banner appearing twice on the page. Both of them look broken in another way:

Removing the app-section component around the app-banner leads to the banner being re-hydrated correctly:

The section isn't doing anything fancy. It just renders its slotted content with a wrapping element.

Expected Behavior

Slotted components should only appear once on the re-hydrated page.

Steps to Reproduce

• Create a new Component which renders its slotted content with a wrapping Host Element.
• Create another component which will be nested (slotted) inside the first component.
• Render yet another component inside the render() function of the second component.
• Prerender the Components on the server using the renderToString function.
• Look at the source-code of the re-hydrated page to see, that the component appears twice on the page.

Code Reproduction URL

https://github.com/eWert-Online/stencil-ssr-hydrate-reproduction

Additional Information

• It has to be an hydration issue, because if you don't pre-render it on the server, everything works fine.
• If you disable JavaScript in the browser it also looks fine. The Problem is with the re-hydration of the rendered markup on the client, not with the pre-rendering on the server.
• The issue does not go away if you wrap the app-section <slot /> in another element (e.g. <div><slot /></div>)