fix(platform-browser): remove styles from DOM of destroyed components (#48298)

alan-agius4 · alxhub · commit 02d5e8d79dc1 · 2023-02-16T15:31:24.000-08:00
Currently style of components using `encapsulation`, `None` or `Emulated` will not be removed from the DOM once the component get destroyed. This change addresses this by keeping track of the number of times a component is rendered, when the component is destroyed the counter is decreased and once this reaches zero the style element is removed from the DOM. Currently, this new behaviour is on opt-in bases, but it will be changed in the next major version. To opt-in, set the `REMOVE_STYLES_ON_COMPONENT_DESTROY` DI token to `true`. Example ```ts @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule ], providers: [ { provide: REMOVE_STYLES_ON_COMPONENT_DESTROY, useValue: true } ], bootstrap: [AppComponent] }) export class AppModule { } ``` Closes #16670 PR Close #48298
diff --git a/goldens/public-api/platform-browser/index.md b/goldens/public-api/platform-browser/index.md
@@ -183,6 +183,9 @@ export const platformBrowser: (extraProviders?: StaticProvider[]) => PlatformRef
 // @public
 export function provideProtractorTestingSupport(): Provider[];
 
+// @public
+export const REMOVE_STYLES_ON_COMPONENT_DESTROY: InjectionToken<boolean>;
+
 // @public
 export interface SafeHtml extends SafeValue {
 }
diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json
@@ -12,7 +12,7 @@
   "aio-local": {
     "uncompressed": {
       "runtime": 4325,
-      "main": 466290,
+      "main": 467355,
       "polyfills": 33836,
       "styles": 74561,
       "light-theme": 92890,
diff --git a/goldens/size-tracking/integration-payloads.json b/goldens/size-tracking/integration-payloads.json
@@ -2,7 +2,7 @@
   "cli-hello-world": {
     "uncompressed": {
       "runtime": 908,
-      "main": 125165,
+      "main": 126185,
       "polyfills": 33824
     }
   },
@@ -19,43 +19,43 @@
   "cli-hello-world-ivy-compat": {
     "uncompressed": {
       "runtime": 930,
-      "main": 132182,
+      "main": 133202,
       "polyfills": 33957
     }
   },
   "cli-hello-world-ivy-i18n": {
     "uncompressed": {
       "runtime": 926,
-      "main": 123543,
+      "main": 125026,
       "polyfills": 34628
     }
   },
   "cli-hello-world-lazy": {
     "uncompressed": {
       "runtime": 2734,
-      "main": 228122,
+      "main": 229111,
       "polyfills": 33842,
       "src_app_lazy_lazy_routes_ts": 487
     }
   },
   "forms": {
     "uncompressed": {
       "runtime": 888,
-      "main": 157604,
+      "main": 158624,
       "polyfills": 33915
     }
   },
   "animations": {
     "uncompressed": {
       "runtime": 898,
-      "main": 156355,
+      "main": 157699,
       "polyfills": 33897
     }
   },
   "standalone-bootstrap": {
     "uncompressed": {
       "runtime": 918,
-      "main": 84527,
+      "main": 85547,
       "polyfills": 33945
     }
   },
diff --git a/packages/core/test/bundling/animations/bundle.golden_symbols.json b/packages/core/test/bundling/animations/bundle.golden_symbols.json
@@ -401,6 +401,9 @@
   {
     "name": "NodeInjectorFactory"
   },
+  {
+    "name": "NoneEncapsulationDomRenderer"
+  },
   {
     "name": "NoopAnimationDriver"
   },
@@ -440,6 +443,9 @@
   {
     "name": "REMOVAL_FLAG"
   },
+  {
+    "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"
+  },
   {
     "name": "RefCountOperator"
   },
@@ -1310,9 +1316,6 @@
   {
     "name": "removeNodesAfterAnimationDone"
   },
-  {
-    "name": "removeStyle"
-  },
   {
     "name": "renderComponent"
   },
diff --git a/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json b/packages/core/test/bundling/cyclic_import/bundle.golden_symbols.json
@@ -296,6 +296,9 @@
   {
     "name": "NodeInjectorFactory"
   },
+  {
+    "name": "NoneEncapsulationDomRenderer"
+  },
   {
     "name": "NullInjector"
   },
@@ -320,6 +323,9 @@
   {
     "name": "R3Injector"
   },
+  {
+    "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"
+  },
   {
     "name": "RefCountOperator"
   },
@@ -998,9 +1004,6 @@
   {
     "name": "removeFromArray"
   },
-  {
-    "name": "removeStyle"
-  },
   {
     "name": "renderComponent"
   },
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -407,6 +407,9 @@
   {
     "name": "NodeInjectorFactory"
   },
+  {
+    "name": "NoneEncapsulationDomRenderer"
+  },
   {
     "name": "NullInjector"
   },
@@ -443,6 +446,9 @@
   {
     "name": "R3ViewContainerRef"
   },
+  {
+    "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"
+  },
   {
     "name": "RadioControlRegistryModule"
   },
@@ -1451,9 +1457,6 @@
   {
     "name": "removeListItem2"
   },
-  {
-    "name": "removeStyle"
-  },
   {
     "name": "removeValidators"
   },
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
@@ -398,6 +398,9 @@
   {
     "name": "NodeInjectorFactory"
   },
+  {
+    "name": "NoneEncapsulationDomRenderer"
+  },
   {
     "name": "NullInjector"
   },
@@ -434,6 +437,9 @@
   {
     "name": "R3ViewContainerRef"
   },
+  {
+    "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"
+  },
   {
     "name": "REQUIRED_VALIDATOR"
   },
@@ -1415,9 +1421,6 @@
   {
     "name": "removeListItem"
   },
-  {
-    "name": "removeStyle"
-  },
   {
     "name": "removeValidators"
   },
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -476,6 +476,9 @@
   {
     "name": "NodeInjectorFactory"
   },
+  {
+    "name": "NoneEncapsulationDomRenderer"
+  },
   {
     "name": "NullInjector"
   },
@@ -533,6 +536,9 @@
   {
     "name": "R3ViewContainerRef"
   },
+  {
+    "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"
+  },
   {
     "name": "ROUTER_CONFIGURATION"
   },
@@ -1763,9 +1769,6 @@
   {
     "name": "removeFromArray"
   },
-  {
-    "name": "removeStyle"
-  },
   {
     "name": "renderComponent"
   },
diff --git a/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json b/packages/core/test/bundling/standalone_bootstrap/bundle.golden_symbols.json
@@ -269,6 +269,9 @@
   {
     "name": "NodeInjectorFactory"
   },
+  {
+    "name": "NoneEncapsulationDomRenderer"
+  },
   {
     "name": "NullInjector"
   },
@@ -290,6 +293,9 @@
   {
     "name": "R3Injector"
   },
+  {
+    "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"
+  },
   {
     "name": "RefCountOperator"
   },
@@ -869,9 +875,6 @@
   {
     "name": "removeFromArray"
   },
-  {
-    "name": "removeStyle"
-  },
   {
     "name": "renderComponent"
   },
diff --git a/packages/core/test/bundling/todo/bundle.golden_symbols.json b/packages/core/test/bundling/todo/bundle.golden_symbols.json
@@ -311,6 +311,9 @@
   {
     "name": "NodeInjectorFactory"
   },
+  {
+    "name": "NoneEncapsulationDomRenderer"
+  },
   {
     "name": "NullInjector"
   },
@@ -347,6 +350,9 @@
   {
     "name": "R3ViewContainerRef"
   },
+  {
+    "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"
+  },
   {
     "name": "RefCountOperator"
   },
@@ -1211,9 +1217,6 @@
   {
     "name": "removeFromArray"
   },
-  {
-    "name": "removeStyle"
-  },
   {
     "name": "renderComponent"
   },
diff --git a/packages/core/test/render3/imported_renderer2.ts b/packages/core/test/render3/imported_renderer2.ts
@@ -8,7 +8,6 @@
 
 import {ɵAnimationEngine, ɵNoopAnimationStyleNormalizer} from '@angular/animations/browser';
 import {MockAnimationDriver} from '@angular/animations/browser/testing';
-import {ɵgetDOM as getDOM} from '@angular/common';
 import {NgZone, RendererFactory2, RendererType2} from '@angular/core';
 import {NoopNgZone} from '@angular/core/src/zone/ng_zone';
 import {EventManager, ɵDomRendererFactory2, ɵDomSharedStylesHost} from '@angular/platform-browser';
@@ -39,8 +38,8 @@ export class SimpleDomEventsPlugin extends EventManagerPlugin {
 export function getRendererFactory2(document: any): RendererFactory2 {
   const fakeNgZone: NgZone = new NoopNgZone();
   const eventManager = new EventManager([new SimpleDomEventsPlugin(document)], fakeNgZone);
-  const rendererFactory =
-      new ɵDomRendererFactory2(eventManager, new ɵDomSharedStylesHost(document), 'dummyappid');
+  const rendererFactory = new ɵDomRendererFactory2(
+      eventManager, new ɵDomSharedStylesHost(document), 'dummyappid', true);
   const origCreateRenderer = rendererFactory.createRenderer;
   rendererFactory.createRenderer = function(element: any, type: RendererType2|null) {
     const renderer = origCreateRenderer.call(this, element, type);
diff --git a/packages/platform-browser/src/browser.ts b/packages/platform-browser/src/browser.ts
@@ -13,7 +13,7 @@ import {BrowserDomAdapter} from './browser/browser_adapter';
 import {SERVER_TRANSITION_PROVIDERS, TRANSITION_ID} from './browser/server-transition';
 import {BrowserGetTestability} from './browser/testability';
 import {BrowserXhr} from './browser/xhr';
-import {DomRendererFactory2} from './dom/dom_renderer';
+import {DomRendererFactory2, REMOVE_STYLES_ON_COMPONENT_DESTROY} from './dom/dom_renderer';
 import {DomEventsPlugin} from './dom/events/dom_events';
 import {EVENT_MANAGER_PLUGINS, EventManager} from './dom/events/event_manager';
 import {KeyEventsPlugin} from './dom/events/key_events';
@@ -207,7 +207,7 @@ const BROWSER_MODULE_PROVIDERS: Provider[] = [
   {provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true, deps: [DOCUMENT]}, {
     provide: DomRendererFactory2,
     useClass: DomRendererFactory2,
-    deps: [EventManager, DomSharedStylesHost, APP_ID]
+    deps: [EventManager, DomSharedStylesHost, APP_ID, REMOVE_STYLES_ON_COMPONENT_DESTROY]
   },
   {provide: RendererFactory2, useExisting: DomRendererFactory2},
   {provide: SharedStylesHost, useExisting: DomSharedStylesHost},
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/shared_styles_host.ts b/packages/platform-browser/src/dom/shared_styles_host.ts
diff --git a/packages/platform-browser/src/platform-browser.ts b/packages/platform-browser/src/platform-browser.ts
diff --git a/packages/platform-browser/test/dom/dom_renderer_spec.ts b/packages/platform-browser/test/dom/dom_renderer_spec.ts
diff --git a/packages/platform-browser/test/dom/shared_styles_host_spec.ts b/packages/platform-browser/test/dom/shared_styles_host_spec.ts
diff --git a/packages/platform-server/src/styles_host.ts b/packages/platform-server/src/styles_host.ts

Original file line number	Diff line number	Diff line change
`@@ -183,6 +183,9 @@ export const platformBrowser: (extraProviders?: StaticProvider[]) => PlatformRef`
`183`	`183`	`// @public`
`184`	`184`	`export function provideProtractorTestingSupport(): Provider[];`
`185`	`185`
	`186`	`+// @public`
	`187`	`+export const REMOVE_STYLES_ON_COMPONENT_DESTROY: InjectionToken<boolean>;`
	`188`	`+`
`186`	`189`	`// @public`
`187`	`190`	`export interface SafeHtml extends SafeValue {`
`188`	`191`	`}`
Original file line number	Diff line number	Diff line change
`@@ -401,6 +401,9 @@`
`401`	`401`	`{`
`402`	`402`	`"name": "NodeInjectorFactory"`
`403`	`403`	`},`
	`404`	`+ {`
	`405`	`+ "name": "NoneEncapsulationDomRenderer"`
	`406`	`+ },`
`404`	`407`	`{`
`405`	`408`	`"name": "NoopAnimationDriver"`
`406`	`409`	`},`
`@@ -440,6 +443,9 @@`
`440`	`443`	`{`
`441`	`444`	`"name": "REMOVAL_FLAG"`
`442`	`445`	`},`
	`446`	`+ {`
	`447`	`+ "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"`
	`448`	`+ },`
`443`	`449`	`{`
`444`	`450`	`"name": "RefCountOperator"`
`445`	`451`	`},`
`@@ -1310,9 +1316,6 @@`
`1310`	`1316`	`{`
`1311`	`1317`	`"name": "removeNodesAfterAnimationDone"`
`1312`	`1318`	`},`
`1313`		`- {`
`1314`		`- "name": "removeStyle"`
`1315`		`- },`
`1316`	`1319`	`{`
`1317`	`1320`	`"name": "renderComponent"`
`1318`	`1321`	`},`
Original file line number	Diff line number	Diff line change
`@@ -296,6 +296,9 @@`
`296`	`296`	`{`
`297`	`297`	`"name": "NodeInjectorFactory"`
`298`	`298`	`},`
	`299`	`+ {`
	`300`	`+ "name": "NoneEncapsulationDomRenderer"`
	`301`	`+ },`
`299`	`302`	`{`
`300`	`303`	`"name": "NullInjector"`
`301`	`304`	`},`
`@@ -320,6 +323,9 @@`
`320`	`323`	`{`
`321`	`324`	`"name": "R3Injector"`
`322`	`325`	`},`
	`326`	`+ {`
	`327`	`+ "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"`
	`328`	`+ },`
`323`	`329`	`{`
`324`	`330`	`"name": "RefCountOperator"`
`325`	`331`	`},`
`@@ -998,9 +1004,6 @@`
`998`	`1004`	`{`
`999`	`1005`	`"name": "removeFromArray"`
`1000`	`1006`	`},`
`1001`		`- {`
`1002`		`- "name": "removeStyle"`
`1003`		`- },`
`1004`	`1007`	`{`
`1005`	`1008`	`"name": "renderComponent"`
`1006`	`1009`	`},`
Original file line number	Diff line number	Diff line change
`@@ -407,6 +407,9 @@`
`407`	`407`	`{`
`408`	`408`	`"name": "NodeInjectorFactory"`
`409`	`409`	`},`
	`410`	`+ {`
	`411`	`+ "name": "NoneEncapsulationDomRenderer"`
	`412`	`+ },`
`410`	`413`	`{`
`411`	`414`	`"name": "NullInjector"`
`412`	`415`	`},`
`@@ -443,6 +446,9 @@`
`443`	`446`	`{`
`444`	`447`	`"name": "R3ViewContainerRef"`
`445`	`448`	`},`
	`449`	`+ {`
	`450`	`+ "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"`
	`451`	`+ },`
`446`	`452`	`{`
`447`	`453`	`"name": "RadioControlRegistryModule"`
`448`	`454`	`},`
`@@ -1451,9 +1457,6 @@`
`1451`	`1457`	`{`
`1452`	`1458`	`"name": "removeListItem2"`
`1453`	`1459`	`},`
`1454`		`- {`
`1455`		`- "name": "removeStyle"`
`1456`		`- },`
`1457`	`1460`	`{`
`1458`	`1461`	`"name": "removeValidators"`
`1459`	`1462`	`},`
Original file line number	Diff line number	Diff line change
`@@ -398,6 +398,9 @@`
`398`	`398`	`{`
`399`	`399`	`"name": "NodeInjectorFactory"`
`400`	`400`	`},`
	`401`	`+ {`
	`402`	`+ "name": "NoneEncapsulationDomRenderer"`
	`403`	`+ },`
`401`	`404`	`{`
`402`	`405`	`"name": "NullInjector"`
`403`	`406`	`},`
`@@ -434,6 +437,9 @@`
`434`	`437`	`{`
`435`	`438`	`"name": "R3ViewContainerRef"`
`436`	`439`	`},`
	`440`	`+ {`
	`441`	`+ "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"`
	`442`	`+ },`
`437`	`443`	`{`
`438`	`444`	`"name": "REQUIRED_VALIDATOR"`
`439`	`445`	`},`
`@@ -1415,9 +1421,6 @@`
`1415`	`1421`	`{`
`1416`	`1422`	`"name": "removeListItem"`
`1417`	`1423`	`},`
`1418`		`- {`
`1419`		`- "name": "removeStyle"`
`1420`		`- },`
`1421`	`1424`	`{`
`1422`	`1425`	`"name": "removeValidators"`
`1423`	`1426`	`},`
Original file line number	Diff line number	Diff line change
`@@ -476,6 +476,9 @@`
`476`	`476`	`{`
`477`	`477`	`"name": "NodeInjectorFactory"`
`478`	`478`	`},`
	`479`	`+ {`
	`480`	`+ "name": "NoneEncapsulationDomRenderer"`
	`481`	`+ },`
`479`	`482`	`{`
`480`	`483`	`"name": "NullInjector"`
`481`	`484`	`},`
`@@ -533,6 +536,9 @@`
`533`	`536`	`{`
`534`	`537`	`"name": "R3ViewContainerRef"`
`535`	`538`	`},`
	`539`	`+ {`
	`540`	`+ "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"`
	`541`	`+ },`
`536`	`542`	`{`
`537`	`543`	`"name": "ROUTER_CONFIGURATION"`
`538`	`544`	`},`
`@@ -1763,9 +1769,6 @@`
`1763`	`1769`	`{`
`1764`	`1770`	`"name": "removeFromArray"`
`1765`	`1771`	`},`
`1766`		`- {`
`1767`		`- "name": "removeStyle"`
`1768`		`- },`
`1769`	`1772`	`{`
`1770`	`1773`	`"name": "renderComponent"`
`1771`	`1774`	`},`
Original file line number	Diff line number	Diff line change
`@@ -269,6 +269,9 @@`
`269`	`269`	`{`
`270`	`270`	`"name": "NodeInjectorFactory"`
`271`	`271`	`},`
	`272`	`+ {`
	`273`	`+ "name": "NoneEncapsulationDomRenderer"`
	`274`	`+ },`
`272`	`275`	`{`
`273`	`276`	`"name": "NullInjector"`
`274`	`277`	`},`
`@@ -290,6 +293,9 @@`
`290`	`293`	`{`
`291`	`294`	`"name": "R3Injector"`
`292`	`295`	`},`
	`296`	`+ {`
	`297`	`+ "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"`
	`298`	`+ },`
`293`	`299`	`{`
`294`	`300`	`"name": "RefCountOperator"`
`295`	`301`	`},`
`@@ -869,9 +875,6 @@`
`869`	`875`	`{`
`870`	`876`	`"name": "removeFromArray"`
`871`	`877`	`},`
`872`		`- {`
`873`		`- "name": "removeStyle"`
`874`		`- },`
`875`	`878`	`{`
`876`	`879`	`"name": "renderComponent"`
`877`	`880`	`},`
Original file line number	Diff line number	Diff line change
`@@ -311,6 +311,9 @@`
`311`	`311`	`{`
`312`	`312`	`"name": "NodeInjectorFactory"`
`313`	`313`	`},`
	`314`	`+ {`
	`315`	`+ "name": "NoneEncapsulationDomRenderer"`
	`316`	`+ },`
`314`	`317`	`{`
`315`	`318`	`"name": "NullInjector"`
`316`	`319`	`},`
`@@ -347,6 +350,9 @@`
`347`	`350`	`{`
`348`	`351`	`"name": "R3ViewContainerRef"`
`349`	`352`	`},`
	`353`	`+ {`
	`354`	`+ "name": "REMOVE_STYLES_ON_COMPONENT_DESTROY"`
	`355`	`+ },`
`350`	`356`	`{`
`351`	`357`	`"name": "RefCountOperator"`
`352`	`358`	`},`
`@@ -1211,9 +1217,6 @@`
`1211`	`1217`	`{`
`1212`	`1218`	`"name": "removeFromArray"`
`1213`	`1219`	`},`
`1214`		`- {`
`1215`		`- "name": "removeStyle"`
`1216`		`- },`
`1217`	`1220`	`{`
`1218`	`1221`	`"name": "renderComponent"`
`1219`	`1222`	`},`