Nested components in server:defer

[jamesli2021]

Astro Info

Astro                    v4.12.2
Node                     v20.15.0
System                   macOS (arm64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/tailwind

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

No response

Describe the Bug

<Nav/> astro component is in OtherPage.astro, the client-side JavaScript document.getElementById could not detect the HTML in ID, which assume the script has executed before the component is render?

<OtherPage server:defer pathname={Astro.url.pathname}>
          <Fragment slot="fallback">
            <div class="min-h-20">s</div>
          </Fragment>
        </OtherPage>

Removed server:defer will work as usual, in SSR mode.

What's the expected result?

How should this situation be dealt with?

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-nuaezo-kcb88z

Participation

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

[github-actions[bot]]

Hello @jamesli2021. 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.

[jamesli2021]

I couldn't see clearly with bad editor on this site that's deteriment to my vision, but you get the idea from my code. https://stackblitz.com/edit/github-nuaezo-kcb88z

[matthewp]

This does work if you enable directRenderScript: https://docs.astro.build/en/reference/configuration-reference/#experimentaldirectrenderscript

As this option will likely be the default in 5.0 I think we'll not try to fix this with that option turned off.

[matthewp]

directRenderScript is not the default in Astro 5 (try beta with astro@alpha)