[astrojs/lit] web component DSD not adopting properly on some initial loads

[hrmcdonald]

Astro Info

Astro                    v4.4.2
Node                     v18.19.0
System                   macOS (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             auto-import
                         @astrojs/lit
                         @astrojs/mdx
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Sometimes on initial page loads in production, SSR'd Lit components do not adopt their SSR'd declarative shadow dom template. The components seem to initialize their own shadow dom before something (I'm guessing the plugin/ponyfill) attempts to have them adopt the DSD.

Usually, when this occurs a refresh of the page fixes this, I'm assuming because by then the resources are cached and load/execute in the proper order. This doesn't always happen on every initial page load. We cannot reproduce this locally in dev builds either I'm guessing because everything is loading fast enough locally.

---

I'll also note we never had this issue previously on Astro ~2.10.15 before updating to 4.x versions. A lot has changed since then so that might not be helpful, but I figured it was worth mentioning.

What's the expected result?

The SSR'd DSD should be adopted by the component instead of them initializing on their own and ignoring what was SSR'd? Here's what the same portion of the DOM looks like when the templates are properly adopted:

Link to Minimal Reproducible Example

Not sure how to repro this atm

Participation

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

[hrmcdonald]

I don't think this source of this issue is directly related to another issue we opened where we saw similar behavior when transitioning pages with view-transitions enabled, but the resulting state of the components is essentially the same so I will note a reference to that issue here: #9953

[github-actions]

Hello @hrmcdonald. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[hrmcdonald]

@matthewp I have been able to make a recreation of this issue here. I cannot share our internal library, but this is a build of an example page that reliably triggers this issue under the conditions outlined in the README.

https://github.com/hrmcdonald/astro-lit-second-declarative-shadow-root-issue

This is increasingly a bigger issue for us. Newer versions of Astro make some pages of our site unusable for some users until the page is reloaded. Because of this we are going to have to rollback to Astro 2.x.x where the issue was not present.