bug: client side re-hydration of slotted elements leads to the element being rendered twice

[eWert-Online]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] 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>)

[eWert-Online]

Hello 👋 is there anything I can do to get this moving forward?

[alicewriteswrongs]

Hello @eWert-Online, thank you for filing this issue and for providing a helpful reproduction case! I have just looked through it a bit and I believe you are right that something is amiss. I'm going to add this to our queue to be investigated further.

[FancyVase]

Any updates on this? 🙏

Running into the same issue with the React output (+ SSR hydration script) of our Stencil components and named slots. I created a repro: https://github.com/FancyVase/test-stencil-ssr though I imagine this is the same bug.

[eWert-Online]

Hello 👋

I need this bug fixed for a client of ours. Is there any way to speed up the resolution of this? Or can you alternatively give a rough estimate of how log it will take to get this fixed?

Thank you!

[bsastregx]

Hello 👋 I am having the same issue. Here you can see my post: https://github.com/ionic-team/stencil/issues/3593 Please, can you give an estimate of how long it will take to get fixed?

[rogeberr]

Hello 👋

I need this bug fixed for a client of ours. Is there any way to speed up the resolution of this? Or can you alternatively give a rough estimate of how log it will take to get this fixed?

Thank you!

Hello, we really need a solution for this problem. Could you help us with this? What do we have to do to speed this issue up? Thank you.

[Johanstormarn]

Hello @alicewriteswrongs, should this issue get "bug: validated"-label? Since we have two reproductions and several incident reports?

[alicewriteswrongs]

Hello all,

I know that it can be frustrating to file an issue about a serious problem you're running into and not see progress on it for a while. We're a small team and when prioritizing issues we have to look at a bunch of different things, including our internal priorities as team, the priorities of the Ionic Framework team, and the community's interests and priorities. At times it's a tough balancing act and we don't always get it 100%, but rest assured that we do look at and prioritize issues like this one — it is already ingested into our internal backlog and while I can't promise a timeline it will be dealt with soon.

I'm going to go ahead and add a note there to take another look soon.

Thanks again everyone for reporting the issue and providing reproduction cases!

[bsastregx]

@alicewriteswrongs I am providing a screenshot of another case where content is duplicated. Cant go to production with this bug.

[bsastregx]

@alicewriteswrongs How are you doing? I'm writting to know if there is any update with this issue. Best regards, Bruno.

[bsastregx]

Hi @alicewriteswrongs. Hope you are doing well.

I don't want to a dense guy here, but we are running an important project which is currently built on top of stenciljs. We love Stencil, and we do not want to switch to another tool, but unfortunatelly, the current bug detailed in this discussion leaves us no other choice. If we could know a rough ETA for this bug to be fixed, we could be able to make a better decission.

For example: We could decide to "freeze" our project for two or three months, at the most. But if the ETA is let's say 6 months, we probablly be better off by switching to another tool, because we can't wait that long.

At least an ETA for this bug to be fixed would be nice.

[CollinHerber]

I started running into this on Stencil 3.0 Any updates on this?

[mayerraphael]

Same here, having this with 2.22.3 and 3.2 as well. All components have shadow: true. Also, we mostly have this with components using other components internally. And the components the problems occure have to be placed inside the slot of another component.

Edit:

The version of JohnJenkins fixes the problem: https://www.npmjs.com/package/@johnjenkins/stencil-community

[bbellmyers]

I created a github reproduction of the issue here: https://github.com/bbellmyers/stencil-nested-slots Seems to be related to the tag name matching somehow between hydration and client-side

[tanner-reits]

Hey all, wanted to give a quick update here as we've finally been able to take a look at this issue. Without getting too in the weeds, this is an issue with Stencil not being able to calculate dependencies between components when slotting Stencil components into other Stencil components at the "implementation layer" for lack of better words (i.e. the index.html). This can result in component connectedCallback()s firing in the incorrect order which breaks client hydration and rendering.

A workaround until we are able to determine a long-term plan/fix is to not slot Stencil components into other Stencil components at that level. You could create an extra component to wrap the two slotted components into one. We understand this isn't ideal, but should unblock anyone experiencing the problem.

We still plan to investigate a better solution/implementation in the future, so please bear with us!