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

* Lit polyfill - wait to polyfill on DOMContentLoaded * Adds changeset
withastro · May 31, 2022 · 55820fa · 55820fa
1 parent 5e66ffb
commit 55820fa
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/gentle-cheetahs-divide.md 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
@@ -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
@@ -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', {