re-shim Astro's ce.define

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": {

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);
 };