iAPI Router: Handle styles assets on region-based navigation #67826
+115
−151
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Adds support for style assets on region-based navigation, allowing stylesheets to be applied or removed when navigating to a new page with different styles.
Why?
This feature is required for some core blocks like the Comments one. In this particular case, when publishing a new comment on a post that does not have any comments, we want to display the new comments without reloading the page using
navigate()
. The new comment might require styles not present on the initial post page.How?
The implementation uses the
adoptedStyleSheets
API.For each
<style>
and<link rel=stylesheet>
tags, aCSSStyleSheet
is generated. If the CSS code contains a relative URL pointing to another asset (e.g., images or fonts), the URL is converted into an absolute URL. That could be removed once thebaseURL
option is supported in Chrome, Edge, or Opera (see coverage in MDN).These
CSSStyleSheet
instances are then passed to theadoptedStyleSheets
property in the correct order.With these APIs, we can solve the following problems:
The PR also replaces the current implementation we have for full-site navigation.
Testing Instructions
TBD
Screenshots or screencast