1 files changed, 28 insertions, 13 deletions
diff --git a/packages/integrations/lit/server-shim.js b/packages/integrations/lit/server-shim.js
index 3f4a8df4f..ed371f89a 100644
--- a/packages/integrations/lit/server-shim.js
+++ b/packages/integrations/lit/server-shim.js
@@ -1,20 +1,35 @@
-import { installWindowOnGlobal } from '@lit-labs/ssr/lib/dom-shim.js';
+import { customElements as litCE, HTMLElement as litShimHTMLElement } from '@lit-labs/ssr-dom-shim';
 
-if (typeof fetch === 'function') {
-	const _fetch = fetch;
-	installWindowOnGlobal();
-	globalThis.fetch = window.fetch = _fetch;
-} else {
-	installWindowOnGlobal();
+// 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
+// caused by Lit and only happens at build / test time, but not in dev or
+// preview time.
+if (globalThis.document) {
+	document.currentScript = null;
 }
 
-window.global = window;
-document.getElementsByTagName = () => [];
-// See https://github.com/lit/lit/issues/2393
-document.currentScript = null;
+if (globalThis.HTMLElement) {
+	// Seems Astro's Element shim does nothing when `.setAttribute` is called
+	// and subsequently `.getAttribute` is called. Causes Lit to not SSR attrs
+	globalThis.HTMLElement = litShimHTMLElement;
+}
+
+// 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 reads
+// `HTMLElement.observedAttributes` which is meant to trigger
+// `ReactiveElement.finalize()`. 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;
 
-const ceDefine = 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
+// a DSD string on the server, because there is no way to get the tagName from a
+// CE class otherwise. Not an issue on client:only because the browser supports
+// 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);
 };