From 23c9a30ad859398d62a013d639b5b2716b583331 Mon Sep 17 00:00:00 2001
From: Augustine Kim <augustinekim@google.com>
Date: Wed, 8 Nov 2023 05:25:39 -0800
Subject: [PATCH] Fix Lit integration hydration ordering (#9018)

* Provide renderer instance to `customElementHostStack`

* Add changeset
---
 .changeset/spotty-rings-crash.md              | 5 +++++
 packages/integrations/lit/server.js           | 2 +-
 packages/integrations/lit/test/server.test.js | 3 +++
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/spotty-rings-crash.md

diff --git a/.changeset/spotty-rings-crash.md b/.changeset/spotty-rings-crash.md
new file mode 100644
index 0000000000..c4522f96ed
--- /dev/null
+++ 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
index d71ccee47b..b5e56f3c26 100644
--- 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
index 557832db5c..08c69965a7 100644
--- 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 () => {