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==}