fix(platform-browser): IsolatedShadowDom encapsulation

ryan-bendel · ryan-bendel · commit a4d94cdec857 · 2025-10-04T09:18:28.000+01:00
Implement IsolatedStyleScopeService. Refactor IsolatedShadowDom implementation to fix various bugs.
diff --git a/integration/cli-hello-world-lazy/size.json b/integration/cli-hello-world-lazy/size.json
@@ -1,5 +1,5 @@
 {
-  "dist/main.js": 108611,
-  "dist/polyfills.js": 34169,
-  "dist/lazy.routes-[hash].js": 361
+  "dist/main.js": 113764,
+  "dist/polyfills.js": 34585,
+  "dist/lazy.routes-[hash].js": 348
 }
diff --git a/integration/defer/size.json b/integration/defer/size.json
@@ -1,5 +1,5 @@
 {
-  "dist/main.js": 12709,
-  "dist/polyfills.js": 33807,
-  "dist/defer.component-[hash].js": 345
+  "dist/main.js": 16253,
+  "dist/polyfills.js": 34585,
+  "dist/defer.component-[hash].js": 331
 }
diff --git a/packages/core/test/acceptance/renderer_factory_spec.ts b/packages/core/test/acceptance/renderer_factory_spec.ts
@@ -23,6 +23,7 @@ import {
   ɵDomRendererFactory2 as DomRendererFactory2,
   EventManager,
   ɵSharedStylesHost,
+  ɵStyleScopeService as StyleScopeService,
 } from '@angular/platform-browser';
 import {isBrowser, isNode} from '@angular/private/testing';
 import {expect} from '@angular/private/testing/matchers';
@@ -391,6 +392,7 @@ function getRendererFactory2(document: Document): RendererFactory2 {
   const fakeNgZone: NgZone = new NoopNgZone();
   const eventManager = new EventManager([], fakeNgZone);
   const appId = 'app-id';
+  const styleScopeService = new StyleScopeService();
   const rendererFactory = new DomRendererFactory2(
     eventManager,
     new ɵSharedStylesHost(document, appId),
@@ -400,6 +402,8 @@ function getRendererFactory2(document: Document): RendererFactory2 {
     isNode ? PLATFORM_SERVER_ID : PLATFORM_BROWSER_ID,
     fakeNgZone,
     null,
+    null, // tracingService
+    styleScopeService,
   );
   const origCreateRenderer = rendererFactory.createRenderer;
   rendererFactory.createRenderer = function (element: any, type: RendererType2 | null) {
diff --git a/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json b/packages/core/test/bundling/animations-standalone/bundle.golden_symbols.json
@@ -132,6 +132,7 @@
       "InjectionToken",
       "Injector",
       "InputFlags",
+      "IsolatedStyleScopeService",
       "KeyEventsPlugin",
       "LEAVE_CLASSNAME",
       "LEAVE_TOKEN",
diff --git a/packages/core/test/bundling/defer/bundle.golden_symbols.json b/packages/core/test/bundling/defer/bundle.golden_symbols.json
@@ -24,6 +24,7 @@
       "EventManagerPlugin",
       "HOST_ATTR",
       "INTERNAL_BROWSER_PLATFORM_PROVIDERS",
+      "IsolatedStyleScopeService",
       "KeyEventsPlugin",
       "MODIFIER_KEYS",
       "MODIFIER_KEY_GETTERS",
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -134,6 +134,7 @@
       "InjectionToken",
       "Injector",
       "InputFlags",
+      "IsolatedStyleScopeService",
       "IterableChangeRecord_",
       "IterableDiffers",
       "KeyEventsPlugin",
diff --git a/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json b/packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json
@@ -128,6 +128,7 @@
       "InjectionToken",
       "Injector",
       "InputFlags",
+      "IsolatedStyleScopeService",
       "IterableChangeRecord_",
       "IterableDiffers",
       "KeyEventsPlugin",
diff --git a/packages/core/test/bundling/hydration/bundle.golden_symbols.json b/packages/core/test/bundling/hydration/bundle.golden_symbols.json
@@ -115,6 +115,7 @@
       "InjectionToken",
       "Injector",
       "InputFlags",
+      "IsolatedStyleScopeService",
       "JSON_CONTENT_TYPE",
       "KeyEventsPlugin",
       "LOCALE_ID",
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -133,6 +133,7 @@
       "InjectionToken",
       "Injector",
       "InputFlags",
+      "IsolatedStyleScopeService",
       "ItemComponent",
       "KeyEventsPlugin",
       "LOCALE_ID",
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
@@ -94,6 +94,7 @@
       "InjectionToken",
       "Injector",
       "InputFlags",
+      "IsolatedStyleScopeService",
       "KeyEventsPlugin",
       "LOCALE_ID",
       "LOCALE_ID",
diff --git a/packages/core/test/render3/imported_renderer2.ts b/packages/core/test/render3/imported_renderer2.ts
@@ -15,6 +15,7 @@ import {
   EventManagerPlugin,
   ɵDomRendererFactory2,
   ɵSharedStylesHost,
+  ɵStyleScopeService,
 } from '@angular/platform-browser';
 import {isNode} from '@angular/private/testing';
 import {type ListenerOptions, NgZone, RendererFactory2, RendererType2} from '../../src/core';
@@ -54,6 +55,7 @@ export function getRendererFactory2(document: any): RendererFactory2 {
   const fakeNgZone: NgZone = new NoopNgZone();
   const eventManager = new EventManager([new SimpleDomEventsPlugin(document)], fakeNgZone);
   const appId = 'appid';
+  const styleScopeService = new ɵStyleScopeService();
   const rendererFactory = new ɵDomRendererFactory2(
     eventManager,
     new ɵSharedStylesHost(document, appId),
@@ -63,6 +65,8 @@ export function getRendererFactory2(document: any): RendererFactory2 {
     isNode ? PLATFORM_SERVER_ID : PLATFORM_BROWSER_ID,
     fakeNgZone,
     null,
+    null, // tracingService
+    styleScopeService,
   );
   const origCreateRenderer = rendererFactory.createRenderer;
   rendererFactory.createRenderer = function (element: any, type: RendererType2 | null) {
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts
diff --git a/packages/platform-browser/src/dom/isolated_style_scope.ts b/packages/platform-browser/src/dom/isolated_style_scope.ts
diff --git a/packages/platform-browser/src/dom/shared_styles_host.ts b/packages/platform-browser/src/dom/shared_styles_host.ts
diff --git a/packages/platform-browser/src/private_export.ts b/packages/platform-browser/src/private_export.ts
diff --git a/packages/platform-browser/test/dom/dom_renderer_spec.ts b/packages/platform-browser/test/dom/dom_renderer_spec.ts

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "dist/main.js": 108611,`
`3`		`- "dist/polyfills.js": 34169,`
`4`		`- "dist/lazy.routes-[hash].js": 361`
	`2`	`+ "dist/main.js": 113764,`
	`3`	`+ "dist/polyfills.js": 34585,`
	`4`	`+ "dist/lazy.routes-[hash].js": 348`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "dist/main.js": 12709,`
`3`		`- "dist/polyfills.js": 33807,`
`4`		`- "dist/defer.component-[hash].js": 345`
	`2`	`+ "dist/main.js": 16253,`
	`3`	`+ "dist/polyfills.js": 34585,`
	`4`	`+ "dist/defer.component-[hash].js": 331`
`5`	`5`	`}`