Lit component renders twice when 1 component renders server side and 1 client side

[RogierdeRuijter]

What version of astro are you using?

2.0.11

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

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When rendering Lit components from our component library we have found that some components have trouble rendering server side. When this happens our solution is to render the component client side.

Now we have found that if we render some components on a page server side and some client side, the server side render components are (sometimes) rendered twice when javascript is enabled.

Here is a codesandbox describing the issue https://codesandbox.io/p/sandbox/astro-double-rendering-7ejrfr?file=%2Fsrc%2Fpages%2Findex.astro

Note: To reproduce the issue refresh the page repeatedly.

Link to Minimal Reproducible Example

https://codesandbox.io/p/sandbox/astro-double-rendering-7ejrfr?file=%2Fsrc%2Fpages%2Findex.astro

Participation

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

[matthewp]

Duplicate of #5304, I'll answer there.