From c97ac180dfc8c345bc48cbb2998bcd8e112edbd8 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <5981958+e111077@users.noreply.github.com>
Date: Tue, 28 Mar 2023 15:57:57 -0700
Subject: [PATCH] re-shim Astro's ce.define

---
 packages/integrations/lit/package.json   |  1 +
 packages/integrations/lit/server-shim.js | 15 ++++++++++-----
 pnpm-lock.yaml                           |  3 +++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/integrations/lit/package.json b/packages/integrations/lit/package.json
index 00412e08cb9a9..19892743d9a83 100644
--- a/packages/integrations/lit/package.json
+++ b/packages/integrations/lit/package.json
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@lit-labs/ssr": "^3.1.0",
+    "@lit-labs/ssr-dom-shim": "^1.1.0",
     "parse5": "^7.1.2"
   },
   "devDependencies": {
diff --git a/packages/integrations/lit/server-shim.js b/packages/integrations/lit/server-shim.js
index d3dd01de48c64..4158c7695efcd 100644
--- a/packages/integrations/lit/server-shim.js
+++ b/packages/integrations/lit/server-shim.js
@@ -1,3 +1,5 @@
+import {customElements as litCE} from '@lit-labs/ssr-dom-shim';
+
 // Something at build time injects document.currentScript = undefined instead of
 // document.currentScript = null. This causes Sass build to fail because it
 // seems to be expecting `=== null`. This set to `undefined` doesn't seem to be
@@ -7,10 +9,13 @@ if (globalThis.document) {
 	document.currentScript = null;
 }
 
-// globalThis.customElements should be defined by the time @lit/reactive-element
-// is loaded. If customElements is not defined by this point, something is
-// affecting the load order.
-const ceDefine = customElements.define;
+// Astro seems to have a DOM shim and the only real difference that we need out
+// of the Lit DOM shim is that the Lit DOM shim does something that triggers
+// ReactiveElement.finalize() to be called. So this is the only thing we will
+// re-shim since Lit will try to respect other global DOM shims.
+globalThis.customElements = litCE;
+
+const litCeDefine = customElements.define;
 
 // We need to patch customElements.define to keep track of the tagName on the
 // class itself so that we can transform JSX custom element class definintion to
@@ -19,5 +24,5 @@ const ceDefine = customElements.define;
 // appending a class instance directly to the DOM.
 customElements.define = function (tagName, Ctr) {
 	Ctr[Symbol.for('tagName')] = tagName;
-	return ceDefine.call(this, tagName, Ctr);
+	return litCeDefine.call(this, tagName, Ctr);
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 82fec34f37e56..deefa2ce65a5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3055,6 +3055,7 @@ importers:
   packages/integrations/lit:
     specifiers:
       '@lit-labs/ssr': ^3.1.0
+      '@lit-labs/ssr-dom-shim': ^1.1.0
       astro: workspace:*
       astro-scripts: workspace:*
       chai: ^4.3.6
@@ -3065,6 +3066,7 @@ importers:
       sass: ^1.52.2
     dependencies:
       '@lit-labs/ssr': 3.1.0
+      '@lit-labs/ssr-dom-shim': 1.1.0
       parse5: 7.1.2
     devDependencies:
       astro: link:../../astro
@@ -15320,6 +15322,7 @@ packages:
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
+    requiresBuild: true
 
   /source-map/0.7.4:
     resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}