Lit polyfill - wait to polyfill on DOMContentLoaded (#3484)

* Lit polyfill - wait to polyfill on DOMContentLoaded

* Adds changeset

3 files changed, 7 insertions, 2 deletions

diff --git a/.changeset/gentle-cheetahs-divide.md b/.changeset/gentle-cheetahs-divide.md
new file mode 100644
index 000000000..8198daef1
--- /dev/null
+++ b/.changeset/gentle-cheetahs-divide.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/lit': patch
+---
+
+Wait for DOMCOntentLoaded to polyfill in Lit
diff --git a/packages/integrations/lit/client-shim.js b/packages/integrations/lit/client-shim.js
index e9cf1aecf..c3ac563ca 100644
--- a/packages/integrations/lit/client-shim.js
+++ b/packages/integrations/lit/client-shim.js
@@ -2,7 +2,7 @@ async function polyfill() {
 	const { hydrateShadowRoots } = await import(
 		'@webcomponents/template-shadowroot/template-shadowroot.js'
 	);
-	hydrateShadowRoots(document.body);
+	window.addEventListener('DOMContentLoaded', () => hydrateShadowRoots(document.body), { once: true });
 }
 
 const polyfillCheckEl = new DOMParser()
diff --git a/packages/integrations/lit/client-shim.min.js b/packages/integrations/lit/client-shim.min.js
index f9fe14fdd..0882a78b3 100644
--- a/packages/integrations/lit/client-shim.min.js
+++ b/packages/integrations/lit/client-shim.min.js
@@ -77,7 +77,7 @@ var S = i(() => {
 });
 async function g() {
 	let { hydrateShadowRoots: t } = await Promise.resolve().then(() => (S(), v));
-	t(document.body);
+	window.addEventListener('DOMContentLoaded', () => t(document.body),{once:true});
 }
 var x = new DOMParser()
 	.parseFromString('<p><template shadowroot="open"></template></p>', 'text/html', {