Lit integration hydration occurs in incorrect order for nested components #9017
Description
Astro Info
Astro v3.4.3
Node v18.18.0
System Linux (x64)
Package Manager npm
Output static
Adapter none
Integrations @astrojs/lit
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
When using Lit integration and hydrating a Lit component that also renders a Lit component as part of it's template, hydration occurs in incorrect order where the child hydrates before the parent. This becomes problematic if the child component takes in properties from the parent that affect its initial render, causing mismatch between what's rendered on server and what client's first render/hydration looks like.
Lit SSR has a mechanism for ensuring proper hydration order using the defer-hydration attribute but it currently is not getting added to nested custom elements.
Fix for this is simple:
astro/packages/integrations/lit/server.js
Lines 62 to 67 in 6e30bdc
customElementHostStack should also get an array with [instance] instead of being empty which lets Lit SSR know that any other custom elements it encounters is nested and should therefore have defer-hydration.
What's the expected result?
Hydration from parent to child with no errors.
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-u3e87a?file=src%2Fpages%2Findex.astro
Participation
- I am willing to submit a pull request for this issue.