From 55820fa784d6d4f66a45092321a47c8ce9de5546 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Tue, 31 May 2022 11:40:26 -0400
Subject: [PATCH] Lit polyfill - wait to polyfill on DOMContentLoaded (#3484)

* Lit polyfill - wait to polyfill on DOMContentLoaded

* Adds changeset
---
 .changeset/gentle-cheetahs-divide.md         | 5 +++++
 packages/integrations/lit/client-shim.js     | 2 +-
 packages/integrations/lit/client-shim.min.js | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/gentle-cheetahs-divide.md

diff --git a/.changeset/gentle-cheetahs-divide.md b/.changeset/gentle-cheetahs-divide.md
new file mode 100644
index 000000000000..8198daef1fd6
--- /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 e9cf1aecf1af..c3ac563ca30c 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 f9fe14fdd021..0882a78b37d1 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', {