feat(platform-browser): - Updates from pr comments

ryan-bendel · ryan-bendel · commit 9f3ae01e2702 · 2025-10-04T09:18:09.000+01:00
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts
@@ -242,8 +242,8 @@ export class DomRendererFactory2 implements RendererFactory2, OnDestroy {
             ngZone,
             platformIsServer,
             tracingService,
-            undefined,
             this.styleScopeService,
+            undefined,
           );
           break;
       }
@@ -503,7 +503,7 @@ function isTemplateNode(node: any): node is HTMLTemplateElement {
 }
 
 class ShadowDomRenderer extends DefaultDomRenderer2 {
-  private shadowRoot: ShadowRoot | HTMLElement;
+  private shadowRoot: ShadowRoot;
 
   constructor(
     eventManager: EventManager,
@@ -515,12 +515,12 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
     platformIsServer: boolean,
     tracingService: TracingService<TracingSnapshot> | null,
     private sharedStylesHost: SharedStylesHost,
-    private styleScopeService?: IsolatedStyleScopeService,
+    private styleScopeService: IsolatedStyleScopeService,
   ) {
     super(eventManager, doc, ngZone, platformIsServer, tracingService);
 
     // Only create shadow root in browser environments
-    if (typeof ShadowRoot !== 'undefined' && !platformIsServer) {
+    if (!platformIsServer) {
       this.shadowRoot = (hostEl as HTMLElement).attachShadow({mode: 'open'});
     } else {
       // In SSR or environments without shadow DOM support, throw
@@ -533,12 +533,7 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
     const isIsolated = component.encapsulation === ViewEncapsulation.IsolatedShadowDom;
 
     // Register shadow root with StyleScopeService for style targeting (only if service available and in browser)
-    if (
-      this.styleScopeService &&
-      typeof ShadowRoot !== 'undefined' &&
-      !platformIsServer &&
-      this.shadowRoot instanceof ShadowRoot
-    ) {
+    if (this.styleScopeService) {
       if (isIsolated) {
         this.styleScopeService.registerIsolatedShadowRoot(this.shadowRoot);
         this.sharedStylesHost.addShadowRoot(this.shadowRoot);
@@ -555,13 +550,7 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
       styles = addBaseHrefToCssSourceMap(baseHref, styles);
     }
 
-    if (
-      isIsolated &&
-      this.styleScopeService &&
-      typeof ShadowRoot !== 'undefined' &&
-      !platformIsServer &&
-      this.shadowRoot instanceof ShadowRoot
-    ) {
+    if (isIsolated && !platformIsServer) {
       // For IsolatedShadowDom, use SharedStylesHost with shadowRoot targeting
       this.sharedStylesHost.addStyles(styles, component.getExternalStyles?.(), this.shadowRoot);
     } else {
@@ -620,12 +609,7 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
 
   override destroy() {
     // Query the service to determine what type this shadow root is (only if service available and in browser)
-    if (
-      !this.platformIsServer &&
-      this.styleScopeService &&
-      typeof ShadowRoot !== 'undefined' &&
-      this.shadowRoot instanceof ShadowRoot
-    ) {
+    if (!this.platformIsServer) {
       if (this.styleScopeService.isIsolatedShadowRoot(this.shadowRoot)) {
         this.styleScopeService.deregisterIsolatedShadowRoot(this.shadowRoot);
         this.sharedStylesHost.removeShadowRoot(this.shadowRoot);
@@ -650,8 +634,8 @@ class NoneEncapsulationDomRenderer extends DefaultDomRenderer2 {
     ngZone: NgZone,
     platformIsServer: boolean,
     tracingService: TracingService<TracingSnapshot> | null,
+    protected styleScopeService: IsolatedStyleScopeService,
     compId?: string,
-    protected styleScopeService?: IsolatedStyleScopeService,
   ) {
     super(eventManager, doc, ngZone, platformIsServer, tracingService);
     let styles = component.styles;
@@ -665,9 +649,9 @@ class NoneEncapsulationDomRenderer extends DefaultDomRenderer2 {
     this.styleUrls = component.getExternalStyles?.(compId);
   }
 
-  applyStyles(element?: HTMLElement): void {
+  applyStyles(element: HTMLElement): void {
     // Check if we should target specific shadow roots (only if service and element available)
-    if (element && this.styleScopeService && !this.platformIsServer) {
+    if (element && !this.platformIsServer) {
       const targetShadowRoots = this.styleScopeService.determineStyleTargets(element);
       if (targetShadowRoots.length > 0) {
         for (const shadowRoot of targetShadowRoots) {
@@ -705,7 +689,7 @@ class EmulatedEncapsulationDomRenderer2 extends NoneEncapsulationDomRenderer {
     ngZone: NgZone,
     platformIsServer: boolean,
     tracingService: TracingService<TracingSnapshot> | null,
-    styleScopeService?: IsolatedStyleScopeService,
+    styleScopeService: IsolatedStyleScopeService,
   ) {
     const compId = appId + '-' + component.id;
     super(
@@ -717,19 +701,17 @@ class EmulatedEncapsulationDomRenderer2 extends NoneEncapsulationDomRenderer {
       ngZone,
       platformIsServer,
       tracingService,
-      compId,
       styleScopeService,
+      compId,
     );
     this.contentAttr = shimContentAttribute(compId);
     this.hostAttr = shimHostAttribute(compId);
   }
 
   applyToHost(element: HTMLElement): void {
-    // Set host attribute first
-    this.setAttribute(element, this.hostAttr, '');
-
     // Use inherited applyStyles method to handle shadow root targeting and fallback
     this.applyStyles(element);
+    this.setAttribute(element, this.hostAttr, '');
   }
 
   override createElement(parent: any, name: string): Element {
diff --git a/packages/platform-browser/src/dom/isolated_style_scope.ts b/packages/platform-browser/src/dom/isolated_style_scope.ts
@@ -36,34 +36,40 @@ export class IsolatedStyleScopeService {
   }
 
   /**
-   * Determines where styles should be applied:
-   * - For elements in isolated shadow roots: return only that shadow root
-   * - For all other cases: return empty array to indicate default broadcast behavior
-   * - Prioritize projected content (assignedSlot) over direct containment
+   * Determines where styles should be applied by checking the immediate shadow DOM context.
+   * Handles both projected content and elements inside shadow roots.
    */
   determineStyleTargets(element: HTMLElement): ShadowRoot[] {
     // Check if we're in an environment that supports ShadowRoot (browser only)
     if (typeof ShadowRoot === 'undefined') {
       return [];
     }
 
-    // Priority 1: Check if element's parent is a shadow root host
+    // Priority 1: Check if element's parent is a shadow root host (handles projected content)
     const parent = element.parentElement;
     if (parent) {
       for (const [shadowRoot, host] of [...this.standardShadowRoots, ...this.isolatedShadowRoots]) {
         if (host === parent) {
-          return this.isIsolatedShadowRoot(shadowRoot) ? [shadowRoot] : [];
+          if (this.isIsolatedShadowRoot(shadowRoot)) {
+            return [shadowRoot]; // Isolated: apply styles to this one root
+          } else {
+            return Array.from(this.standardShadowRoots.keys()); // Standard: apply to all standard roots
+          }
         }
       }
     }
 
-    // Priority 2: Check if element is directly in a shadow root
+    // Priority 2: Check what shadow root context this element is in (handles elements inside shadow roots)
     const elementRoot = element.getRootNode();
     if (elementRoot instanceof ShadowRoot && this.isRegisteredShadowRoot(elementRoot)) {
-      return this.isIsolatedShadowRoot(elementRoot) ? [elementRoot] : [];
+      if (this.isIsolatedShadowRoot(elementRoot)) {
+        return [elementRoot]; // Isolated: apply styles to this one root
+      } else {
+        return Array.from(this.standardShadowRoots.keys()); // Standard: apply to all standard roots
+      }
     }
 
-    // Default: return an empty array to indicate default broadcast behavior
+    // Element is not in a shadow root context, use broadcast behavior
     return [];
   }
 
diff --git a/packages/platform-browser/src/dom/shared_styles_host.ts b/packages/platform-browser/src/dom/shared_styles_host.ts
@@ -392,7 +392,7 @@ export class SharedStylesHost implements OnDestroy {
   removeShadowRoot(shadowRoot: ShadowRoot): void {
     const index = this.isolatedShadowRoots.indexOf(shadowRoot);
 
-    if (ngDevMode && index === -1) {
+    if (typeof ngDevMode !== 'undefined' && ngDevMode && ngDevMode && index === -1) {
       throw new Error('Attempted to remove shadow root that was not previously added.');
     }
 

Original file line number	Diff line number	Diff line change
`@@ -392,7 +392,7 @@ export class SharedStylesHost implements OnDestroy {`
`392`	`392`	`removeShadowRoot(shadowRoot: ShadowRoot): void {`
`393`	`393`	`const index = this.isolatedShadowRoots.indexOf(shadowRoot);`
`394`	`394`
`395`		`- if (ngDevMode && index === -1) {`
	`395`	`+ if (typeof ngDevMode !== 'undefined' && ngDevMode && ngDevMode && index === -1) {`
`396`	`396`	`throw new Error('Attempted to remove shadow root that was not previously added.');`
`397`	`397`	`}`
`398`	`398`