Skip to content

fix(platform-browser): Fixes Shadowdom encapsulation to not include external styles #62357

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

Closed
ryan-bendel wants to merge 5 commits into from
Closed

fix(platform-browser): Fixes Shadowdom encapsulation to not include external styles #62357

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9cf47d9
fix(platform-browser): Fixes Shadowdom to not include external styles…
ryan-bendel Jun 28, 2025
1dec08e
fix(platform-browser): Fixes Shadowdom so it meets spec
ryan-bendel Jun 29, 2025
acb5c9b
fix(platform-browser): Fixes Shadowdom so it meets spec
ryan-bendel Jun 29, 2025
ec83ad2
test(platform-browser): Fixes linting
ryan-bendel Jun 30, 2025
065f4f7
test(platform-browser): Fixes integration
ryan-bendel Jun 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix(platform-browser): Fixes Shadowdom to not include external styles… 
… that are not declared by the component. Prevents style bleed, so components are scoped correctly. Now adheres to the spec for Shadowdom
  • Loading branch information
@ryan-bendel
ryan-bendel committed Jun 28, 2025
commit 9cf47d9d2bce83dec8ac847f3a17cfe6dbf3b962
24 changes: 0 additions & 24 deletions packages/platform-browser/src/dom/dom_renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,6 @@ export class DomRendererFactory2 implements RendererFactory2, OnDestroy {
case ViewEncapsulation.ShadowDom:
return new ShadowDomRenderer(
eventManager,
sharedStylesHost,
element,
type,
doc,
Expand Down Expand Up @@ -496,7 +495,6 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {

constructor(
eventManager: EventManager,
private sharedStylesHost: SharedStylesHost,
private hostEl: any,
component: RendererType2,
doc: Document,
Expand All @@ -507,7 +505,6 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
) {
super(eventManager, doc, ngZone, platformIsServer, tracingService);
this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});
this.sharedStylesHost.addHost(this.shadowRoot);
let styles = component.styles;
if (ngDevMode) {
// We only do this in development, as for production users should not add CSS sourcemaps to components.
Expand All @@ -527,23 +524,6 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
styleEl.textContent = style;
this.shadowRoot.appendChild(styleEl);
}

// Apply any external component styles to the shadow root for the component's element.
// The ShadowDOM renderer uses an alternative execution path for component styles that
// does not use the SharedStylesHost that other encapsulation modes leverage. Much like
// the manual addition of embedded styles directly above, any external stylesheets
// must be manually added here to ensure ShadowDOM components are correctly styled.
// TODO: Consider reworking the DOM Renderers to consolidate style handling.
const styleUrls = component.getExternalStyles?.();
if (styleUrls) {
for (const styleUrl of styleUrls) {
const linkEl = createLinkElement(styleUrl, doc);
if (nonce) {
linkEl.setAttribute('nonce', nonce);
}
this.shadowRoot.appendChild(linkEl);
}
}
}

private nodeOrShadowRoot(node: any): any {
Expand All @@ -562,10 +542,6 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
override parentNode(node: any): any {
return this.nodeOrShadowRoot(super.parentNode(this.nodeOrShadowRoot(node)));
}

override destroy() {
this.sharedStylesHost.removeHost(this.shadowRoot);
}
}

class NoneEncapsulationDomRenderer extends DefaultDomRenderer2 {
Expand Down
Loading