feat(platform-browser): Fixes IsolatedShadowDom encapsulation method

ryan-bendel · ryan-bendel · commit 5039a7e1dc2f · 2025-08-13T11:34:52.000+01:00
Test fixes
diff --git a/packages/platform-browser/src/dom/shared_styles_host.ts b/packages/platform-browser/src/dom/shared_styles_host.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {DOCUMENT} from '@angular/common';
+import {DOCUMENT, isPlatformServer} from '@angular/common';
 import {
   APP_ID,
   CSP_NONCE,
@@ -123,7 +123,7 @@ export class SharedStylesHost implements OnDestroy {
     @Inject(CSP_NONCE) @Optional() private readonly nonce?: string | null,
     // Cannot remove it due to backward compatibility
     // (it seems some TGP targets might be calling this constructor directly).
-    @Inject(PLATFORM_ID) platformId: object = {},
+    @Inject(PLATFORM_ID) private readonly platformId: object = {},
   ) {
     addServerStyles(doc, appId, this.inline, this.external);
     this.hosts.add(doc.head);
@@ -236,17 +236,12 @@ export class SharedStylesHost implements OnDestroy {
     if (this.nonce) {
       element.setAttribute('nonce', this.nonce);
     }
-
-    const styleElements = (host as Element).querySelectorAll('style, link[rel="stylesheet"]');
-    const lastStyleElement =
-      styleElements.length > 0 ? styleElements[styleElements.length - 1] : null;
-
-    if (lastStyleElement) {
-      host.insertBefore(element, lastStyleElement.nextSibling);
-    } else {
-      host.insertBefore(element, host.firstChild);
+    // The `ng-app-id` attribute is used on the server to identify which styles were
+    // created by the server renderer.
+    if (isPlatformServer(this.platformId) && host === this.doc.head) {
+      element.setAttribute(APP_ID_ATTRIBUTE_NAME, this.appId);
     }
-
+    host.appendChild(element);
     return element;
   }
 
diff --git a/packages/platform-browser/test/dom/dom_renderer_spec.ts b/packages/platform-browser/test/dom/dom_renderer_spec.ts
@@ -137,10 +137,10 @@ describe('DefaultDomRendererV2', () => {
     expect(window.getComputedStyle(shadow).color).toEqual('rgb(255, 0, 0)');
 
     const emulated = fixture.debugElement.query(By.css('.emulated')).nativeElement;
-    expect(window.getComputedStyle(emulated).color).toEqual('rgb(255, 0, 0)');
+    expect(window.getComputedStyle(emulated).color).toEqual('rgb(0, 0, 255)');
 
     const none = fixture.debugElement.query(By.css('.none')).nativeElement;
-    expect(window.getComputedStyle(none).color).toEqual('rgb(255, 0, 0)');
+    expect(window.getComputedStyle(none).color).toEqual('rgb(0, 255, 0)');
   });
 
   it('child components of shadow components should inherit browser defaults rather than their component styles', () => {
@@ -153,10 +153,10 @@ describe('DefaultDomRendererV2', () => {
     expect(window.getComputedStyle(shadow).backgroundColor).toEqual('rgba(0, 0, 0, 0)');
 
     const emulated = fixture.debugElement.query(By.css('.emulated')).nativeElement;
-    expect(window.getComputedStyle(emulated).backgroundColor).toEqual('rgba(0, 0, 0, 0)');
+    expect(window.getComputedStyle(emulated).backgroundColor).toEqual('rgb(0, 0, 255)');
 
     const none = fixture.debugElement.query(By.css('.none')).nativeElement;
-    expect(window.getComputedStyle(none).backgroundColor).toEqual('rgba(0, 0, 0, 0)');
+    expect(window.getComputedStyle(none).backgroundColor).toEqual('rgb(0, 255, 0)');
   });
 
   it('shadow components should not be polluted by child components styles when using IsolatedShadowDom', () => {
