Fix Lit integration hydration ordering (#9018)

* Provide renderer instance to `customElementHostStack` * Add changeset
withastro · Nov 8, 2023 · 23c9a30 · 23c9a30
1 parent 3c17b59
commit 23c9a30
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/spotty-rings-crash.md b/.changeset/spotty-rings-crash.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/lit': patch
+---
+
+Fix hydration ordering of nested custom elements. Child components will now wait for their parents to hydrate before hydrating themselves.
diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js
@@ -62,7 +62,7 @@ function* render(Component, attrs, slots) {
 	const shadowContents = instance.renderShadow({
 		elementRenderers: [LitElementRenderer],
 		customElementInstanceStack: [instance],
-		customElementHostStack: [],
+		customElementHostStack: [instance],
 		deferHydration: false,
 	});
 	if (shadowContents !== undefined) {

diff --git a/packages/integrations/lit/test/server.test.js b/packages/integrations/lit/test/server.test.js
@@ -112,6 +112,9 @@ describe('renderToStaticMarkup', () => {
 		const render = await renderToStaticMarkup(tagName);
 		const $ = cheerio.load(render.html);
 		expect($(`${tagName} template`).text()).to.contain('child');
+		// Child component should have `defer-hydration` attribute so it'll only
+		// hydrate after the parent hydrates
+		expect($(childTagName).attr('defer-hydration')).to.equal('');
 	});
 
 	it('should render DSD attributes based on shadowRootOptions', async () => {