🐛 BUG: Lit custom-element SSR fails in Firefox

[jon-loubert]

What version of astro are you using?

v1.0.0-beta.37

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

MacOS 12.4

Describe the Bug

Server-side-rendered Lit elements do not render in Firefox (I'm using the latest FF Developer edition, 101.0b9 (640bit)). To reproduce, open the existing Lit example from https://astro.new/ in Firefox on any of StackBlitz, CodeSandbox, or GitPod. I also reproduced this locally by cloning the Lit example and doing npm run dev on a fresh clone.

The sample custom element my-counter that uses the client:load directive appears on the page as expected, but the other sample element calc-add does not get rendered. Looking at the DOM, you can see that the children of calc-add are still in the template fragment, and have not been added to the shadow root.

There is a console error that appears in Firefox that could be related; it looks to be from a shim that is loaded by the Lit adapter, but the stack trace points to minified code (the shim also logs an error to the server about missing sourcemaps, which I think is the same thing referenced in #2814).

Link to Minimal Reproducible Example

https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-lit?file=README.md&on=stackblitz

Participation

• I am willing to submit a pull request for this issue.

[ba55ie]

Yup, the polyfill script is the culprit. It gets injected into the head and tries to polyfill document.body before the DOM is fully parsed.

The easiest fix (I think) is to add an event listener for the DOMContentLoaded event to the polyfill function. The @webcomponents/template-shadowroot/template-shadowroot.js script get's in-lined too and therefor the script executes immediately which causes the error.

async function polyfill() {
	const { hydrateShadowRoots } = await import(
		'@webcomponents/template-shadowroot/template-shadowroot.js'
	);

	window.addEventListener('DOMContentLoaded', () => hydrateShadowRoots(document.body), { once: true });
}

Or place the script lower in the DOM, but I don't think that is possible? https://docs.astro.build/nl/reference/integrations-reference/#injectscript-option