Skip to content

fix(platform-browser): Fixes IsolatedShadowDom encapsulation method #63131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(platform-browser): Fixes IsolatedShadowDom encapsulation method #63131

wants to merge 1 commit into from

Conversation

ryan-bendel
Copy link
Contributor

This fixes an issue where a child component inside of IsolatedShadowDom would get it's styles moved to the root style object, causing it to be unstyled. This new approach hoists the child styles to the shadowroot. This change only applies to IsolatedShadowDom

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.dev application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

After introducing IsolatedShadowDom, it was raised on the PR that any child components using other encapsulation methods would have their styles hoisted to the root styles of the app. This would cause the child component to be unstyled as it is inside a shadowroot.

What is the new behavior?

The new behaviour hoists the styles of any child component into the head of the shadowroot.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Spun up a test project:

  1. Set a global button colour, green.
  2. Created an isolated shadowdom component, with a button, and a child component using emulated, with a button styled red

Comparisons:
Standard/old Shadowdom encapsulation with style leakage:

Screenshot 2025-08-13 at 08 09 09

IsolatedShadowDom pre-fix (styles are moved to root so child component loses styling):

Screenshot 2025-08-13 at 08 14 58

IsolatedShadowDom post-fix (styles are moved to shadowhost, fixing child component styling):
Screenshot 2025-08-13 at 08 09 23

As you can see from the last screenshot, the styles are now correctly applied to the child (Emulated) component

@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: core Issues related to the framework runtime labels Aug 13, 2025
@ngbot ngbot bot added this to the Backlog milestone Aug 13, 2025
@ryan-bendel
Copy link
Contributor Author

ryan-bendel commented Aug 13, 2025 •
edited
Loading

@thePunderWoman et al 👋 - me again!

A follow up to the IsolatedShadowDom PR we did recently, it was raised that there was an issue with child components inside an IsolatedShadowDom component losing their styling (as sharedStylesHost was removed)

I've done a bit of a refactor, providing an alternative way for IsolatedShadowDom to add/hoist styles, which fixes the issue.

This is very much a RFC, or even better if you have capacity to have a quick test? It's a bit of a grey area for me in regards to the shadowdom spec, which doesn't explicitly talk about child component styling (and Angular muddies the waters a bit with different encapsulation methods). However this feels like the best of both worlds, parent styles cannot leak/be added into the shadowdom, but child component styles are correctly applied.

@ryan-bendel ryan-bendel changed the title feat(platform-browser): Fixes IsolatedShadowDom encapsulation method fix(platform-browser): Fixes IsolatedShadowDom encapsulation method Aug 13, 2025
@ryan-bendel ryan-bendel force-pushed the fix-isolated-shadowdom branch 2 times, most recently from 5039a7e to 367d39d Compare August 13, 2025 10:37
@JeanMeche JeanMeche mentioned this pull request Aug 13, 2025
Closed
14 tasks
@ryan-bendel ryan-bendel marked this pull request as ready for review August 15, 2025 10:10
@pullapprove pullapprove bot requested a review from AndrewKushnir August 15, 2025 10:11
@AndrewKushnir AndrewKushnir requested review from thePunderWoman and dgp1130 and removed request for AndrewKushnir August 15, 2025 16:40
@ryan-bendel ryan-bendel force-pushed the fix-isolated-shadowdom branch from bba0484 to 8813776 Compare August 18, 2025 11:38
@MattiJarvinen MattiJarvinen mentioned this pull request Aug 18, 2025
Closed
1 task
alan-agius4
alan-agius4 reviewed Aug 19, 2025
View reviewed changes
@ryan-bendel
fix(platform-browser): Fixes IsolatedShadowDom encapsulation method
42511ea 
This fixes an issue where a child component inside of IsolatedShadowDom would get it's styles moved to the root style object, causing it to be unstyled. This new approach hoists the styles to the shadowroot. This change only applies to IsolatedShadowDom
@ryan-bendel ryan-bendel force-pushed the fix-isolated-shadowdom branch from 0b8d24e to 42511ea Compare August 19, 2025 13:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alan-agius4 alan-agius4 alan-agius4 left review comments

@thePunderWoman thePunderWoman Awaiting requested review from thePunderWoman

@dgp1130 dgp1130 Awaiting requested review from dgp1130

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
area: core Issues related to the framework runtime detected: feature PR contains a feature commit
Projects
None yet
Milestone
Backlog
Development

Successfully merging this pull request may close these issues.
2 participants
@ryan-bendel @alan-agius4