Skip to content

Attach declarative Shadow DOM templates during view transition#14341

Merged
delucis merged 3 commits intomainfrom
chris/dsd
Sep 10, 2025
Merged

Attach declarative Shadow DOM templates during view transition#14341
delucis merged 3 commits intomainfrom
chris/dsd

Conversation

@delucis
Copy link
Copy Markdown
Member

@delucis delucis commented Sep 10, 2025 •
edited
Loading

Changes

  • Fixes HTML using Declarative Shadow DOM breaks when using <ClientRouter> #14340
  • <ClientRouter> uses DOMParser to parse the HTML fetched by the router, but this does not support attaching declarative Shadow DOM (<template> elements using the shadowrootmode attribute) the same way as browsers do when pages load normally.
  • One fix would be to use APIs like document.parseHTMLUnsafe(), but that would be more disruptive to our code (especially as it’s not widely supported yet so would need a polyfill), so instead I left the DOMParser untouched and manually upgrade any templates in the swapBodyElement() function.
  • The function used is based on this polyfill.

Testing

New E2E test in the view transition fixture.

Docs

N/A — bug fix.

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Sep 10, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: b5a9d0c

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Sep 10, 2025
@delucis delucis marked this pull request as ready for review September 10, 2025 13:45
@delucis delucis requested a review from martrapp September 10, 2025 13:45
@codspeed-hq
Copy link
Copy Markdown

codspeed-hq bot commented Sep 10, 2025 •
edited
Loading

CodSpeed Performance Report

Merging #14341 will not alter performance

Comparing chris/dsd (b5a9d0c) with main (17c7b03)1

Summary

✅ 6 untouched benchmarks

Footnotes

  1. No successful run was found on main (468c845) during the generation of this report, so 17c7b03 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

martrapp
martrapp approved these changes Sep 10, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@martrapp martrapp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks very good to me, Chris!

Handmade shadow roots, so that they are declarative for everybody else!
Tried hard to suggest any improvements, but can't. Perfect.

Complete with tests, and comments, and ... and wait ... CHANGESET?

@martrapp
Copy link
Copy Markdown
Member

martrapp commented Sep 10, 2025

I agree this requires no docs change, but it would be nice if people who where looking for DSD support would know that the wait is over ;-)

@delucis
Copy link
Copy Markdown
Member Author

delucis commented Sep 10, 2025

Complete with tests, and comments, and ... and wait ... CHANGESET?

Well spotted! Added one.

it would be nice if people who where looking for DSD support would know that the wait is over ;-)

That’s what the changeset is for 😃

@delucis delucis merged commit f75fd99 into main Sep 10, 2025
21 checks passed
@delucis delucis deleted the chris/dsd branch September 10, 2025 14:33
@astrobot-houston astrobot-houston mentioned this pull request Sep 10, 2025
Merged
openscript pushed a commit to openscript/astro that referenced this pull request Sep 12, 2025
@delucis @openscript
Attach declarative Shadow DOM templates during view transition (witha…
d3604f8 
…stro#14341)
@Arecsu Arecsu mentioned this pull request Nov 9, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@martrapp martrapp martrapp approved these changes

Assignees

No one assigned

Labels

pkg: astro Related to the core `astro` package (scope)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

HTML using Declarative Shadow DOM breaks when using <ClientRouter>

2 participants

@delucis @martrapp