diff --git a/.changeset/spotty-rings-crash.md b/.changeset/spotty-rings-crash.md
new file mode 100644
index 000000000000..c4522f96ed32
--- /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 d71ccee47b21..b5e56f3c263e 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 557832db5ccb..08c69965a758 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 () => {