Skip to content

Another approach to bootstrap Angular under a shadow root#67947

Merged
kirjs merged 5 commits intoangular:mainfrom
dgp1130:bootstrap-shadow-again
Apr 10, 2026
Merged

Another approach to bootstrap Angular under a shadow root#67947
kirjs merged 5 commits intoangular:mainfrom
dgp1130:bootstrap-shadow-again

Conversation

@dgp1130
Copy link
Copy Markdown
Contributor

@dgp1130 dgp1130 commented Mar 31, 2026

(Attempt number 3 at a minimal approach to supporting bootstrapping under a shadow root.)

This is a spin off of #66782, with the primary takeaway that referencing counting usages of specific shadow root hosts is hardTM. This approach attempts to avoid that problem by simply limiting to one root component per shadow root. It's not particularly elegant, but hopefully a small improvement to current behavior.

CARETAKER NOTE: Presubmit is showing a known failure in an internal app. I recommend syncing this into g3 in its own CL and let me know as I'll need to follow up with a couple prepared fixes for some internal customers.

@angular-robot angular-robot bot added the area: core Issues related to the framework runtime label Mar 31, 2026
@ngbot ngbot bot added this to the Backlog milestone Mar 31, 2026
@dgp1130 dgp1130 force-pushed the bootstrap-shadow-again branch from 7f43620 to 6a60524 Compare April 3, 2026 00:15
@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Apr 3, 2026
@dgp1130 dgp1130 added action: review The PR is still awaiting reviews from at least one requested reviewer target: major This PR is targeted for the next major release core: stylesheets labels Apr 3, 2026
@dgp1130 dgp1130 changed the title Trying another approach to bootstrap Angular under a shadow root Another approach to bootstrap Angular under a shadow root Apr 3, 2026
@dgp1130 dgp1130 requested a review from mattrbeck April 3, 2026 02:17
@dgp1130 dgp1130 marked this pull request as ready for review April 3, 2026 02:18
@dgp1130 dgp1130 force-pushed the bootstrap-shadow-again branch 2 times, most recently from 1a26eab to 9aa4472 Compare April 6, 2026 18:00
@dgp1130 dgp1130 force-pushed the bootstrap-shadow-again branch 4 times, most recently from d3b12b8 to c722bdf Compare April 6, 2026 22:43
@pullapprove pullapprove bot requested review from kirjs and thePunderWoman April 6, 2026 23:07
Copy link
Copy Markdown
Contributor

@thePunderWoman thePunderWoman left a comment

Choose a reason for hiding this comment

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

AGENT: Thanks for the updates! I've left a comment regarding a potential duplication of server-rendered styles when components are created in the light DOM for your consideration.

@pullapprove pullapprove bot requested a review from atscott April 7, 2026 16:47
@dgp1130 dgp1130 force-pushed the bootstrap-shadow-again branch 2 times, most recently from 590b312 to 304ffbf Compare April 7, 2026 22:55
Copy link
Copy Markdown
Member

@alxhub alxhub left a comment

Choose a reason for hiding this comment

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

Reviewed-for: size-tracking

Copy link
Copy Markdown
Member

@alxhub alxhub left a comment

Choose a reason for hiding this comment

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

Reviewed-for: size-tracking

dgp1130 added 2 commits April 9, 2026 08:55
…` with a dedicated `InjectionToken`

This allows code in `@angular/core` to inject and use `SharedStylesHost`, even though the implementation is defined in `@angular/platform-browser`.
This is necessary for an `RNode` to discover whether it is within the context of a shadow root, which is needed to know where a component's style should be placed.

The method is Baseline Widely Available, however we need to treat it as optional for SSR / JSDom contexts where shadow DOM is not supported.
dgp1130 added 3 commits April 9, 2026 08:55
…iple times

This shouldn't have been happening before, but now that we're going to start calling `addHost` during root component boostrap, we may call `addHost` on the same node multiple times and don't want to duplicate styles.
…dow roots

This is a minimal implmentation which just focuses on registering parent shadow roots in `SharedStylesHost` correctly.

We don't currently reference count usage of host values, meaning that as soon as we call `removeHost`, all styles are removed from it, even if other components relied on them. Therefore there is no good way to know whether styles are still needed or not, leaving us with the choice of either leaking them longer than necessary or destroying them while another component still needs them. The compromise I'm using here is to delete styles when destroying a component under a shadow root (based on the assumption that only one component will exist per shadow root) and to leave styles when destroying a component in the main document (based on the assumption that dialogs being destroyed should not impact the main application).

Neither assumption is totally safe to make, but we're hoping this is a viable balance for the moment. In the future we should look into lifting these restrictions to better support those use cases while properly reference counting usage of hosts in `SharedStylesHost`.

I also added some small tests to confirm that SSR styles are not duplicated, as an earlier implementation accidentally duplicated them. This should ensure we don't repeat that mistake.
…der shadow roots

This tests bootstrapping Angular underneath a shadow root and that styles are applied and removed at the correct locations.
@dgp1130 dgp1130 force-pushed the bootstrap-shadow-again branch from 304ffbf to e4bbecc Compare April 9, 2026 16:06
Copy link
Copy Markdown
Contributor

@thePunderWoman thePunderWoman left a comment

Choose a reason for hiding this comment

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

LGTM!

@dgp1130 dgp1130 removed request for atscott and kirjs April 9, 2026 17:15
@dgp1130 dgp1130 added action: merge The PR is ready for merge by the caretaker merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Apr 9, 2026
@kirjs
Copy link
Copy Markdown
Contributor

kirjs commented Apr 9, 2026

Can you see if the presubmit failures are real?

@kirjs kirjs added action: presubmit The PR is in need of a google3 presubmit and removed action: merge The PR is ready for merge by the caretaker labels Apr 9, 2026
@dgp1130
Copy link
Copy Markdown
Contributor Author

dgp1130 commented Apr 9, 2026

They are, but I have a separate fix for them and am planning to follow up immediately after the sync CL lands.

@kirjs kirjs added action: merge The PR is ready for merge by the caretaker and removed action: presubmit The PR is in need of a google3 presubmit labels Apr 10, 2026
@kirjs kirjs merged commit e453848 into angular:main Apr 10, 2026
24 of 27 checks passed
@kirjs
Copy link
Copy Markdown
Contributor

kirjs commented Apr 10, 2026

This PR was merged into the repository. The changes were merged into the following branches:

@dgp1130 dgp1130 deleted the bootstrap-shadow-again branch April 10, 2026 18:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

action: merge The PR is ready for merge by the caretaker area: core Issues related to the framework runtime core: stylesheets detected: feature PR contains a feature commit merge: caretaker note Alert the caretaker performing the merge to check the PR for an out of normal action needed or note target: major This PR is targeted for the next major release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants