Lit integration hydration occurs in incorrect order for nested components

[augustjk]

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

	const shadowContents = instance.renderShadow({
	elementRenderers: [LitElementRenderer],
	customElementInstanceStack: [instance],
	customElementHostStack: [],
	deferHydration: false,
	});

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.