fix(platform-browser): prevent memory leak of style nodes if shadow DOM encapsulation is used (#42005)

JoostK · alxhub · commit d5555558d007 · 2021-05-10T16:12:22.000-04:00
Prior to this change, any inserted `<style>` nodes into shadow dom trees would be retained in memory, even after the shadow dom tree has been removed. This commit fixes the memory leak by tracking the inserted `<style>` nodes per host element, such that removal of the host element also releases the style nodes. Fixes #36655 PR Close #42005
diff --git a/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json b/packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json
@@ -1430,6 +1430,9 @@
   {
     "name": "removeListItem"
   },
+  {
+    "name": "removeStyle"
+  },
   {
     "name": "renderComponent"
   },
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
@@ -1394,6 +1394,9 @@
   {
     "name": "removeListItem"
   },
+  {
+    "name": "removeStyle"
+  },
   {
     "name": "renderComponent"
   },
diff --git a/packages/core/test/bundling/router/bundle.golden_symbols.json b/packages/core/test/bundling/router/bundle.golden_symbols.json
@@ -1832,6 +1832,9 @@
   {
     "name": "removeFromArray"
   },
+  {
+    "name": "removeStyle"
+  },
   {
     "name": "renderComponent"
   },
diff --git a/packages/platform-browser/src/dom/shared_styles_host.ts b/packages/platform-browser/src/dom/shared_styles_host.ts
@@ -34,35 +34,47 @@ export class SharedStylesHost {
 
 @Injectable()
 export class DomSharedStylesHost extends SharedStylesHost implements OnDestroy {
-  private _hostNodes = new Set<Node>();
-  private _styleNodes = new Set<Node>();
+  // Maps all registered host nodes to a list of style nodes that have been added to the host node.
+  private _hostNodes = new Map<Node, Node[]>();
+
   constructor(@Inject(DOCUMENT) private _doc: any) {
     super();
-    this._hostNodes.add(_doc.head);
+    this._hostNodes.set(_doc.head, []);
   }
 
-  private _addStylesToHost(styles: Set<string>, host: Node): void {
+  private _addStylesToHost(styles: Set<string>, host: Node, styleNodes: Node[]): void {
     styles.forEach((style: string) => {
       const styleEl = this._doc.createElement('style');
       styleEl.textContent = style;
-      this._styleNodes.add(host.appendChild(styleEl));
+      styleNodes.push(host.appendChild(styleEl));
     });
   }
 
   addHost(hostNode: Node): void {
-    this._addStylesToHost(this._stylesSet, hostNode);
-    this._hostNodes.add(hostNode);
+    const styleNodes: Node[] = [];
+    this._addStylesToHost(this._stylesSet, hostNode, styleNodes);
+    this._hostNodes.set(hostNode, styleNodes);
   }
 
   removeHost(hostNode: Node): void {
+    const styleNodes = this._hostNodes.get(hostNode);
+    if (styleNodes) {
+      styleNodes.forEach(removeStyle);
+    }
     this._hostNodes.delete(hostNode);
   }
 
   onStylesAdded(additions: Set<string>): void {
-    this._hostNodes.forEach(hostNode => this._addStylesToHost(additions, hostNode));
+    this._hostNodes.forEach((styleNodes, hostNode) => {
+      this._addStylesToHost(additions, hostNode, styleNodes);
+    });
   }
 
   ngOnDestroy(): void {
-    this._styleNodes.forEach(styleNode => getDOM().remove(styleNode));
+    this._hostNodes.forEach(styleNodes => styleNodes.forEach(removeStyle));
   }
 }
+
+function removeStyle(styleNode: Node): void {
+  getDOM().remove(styleNode);
+}
diff --git a/packages/platform-browser/test/dom/shared_styles_host_spec.ts b/packages/platform-browser/test/dom/shared_styles_host_spec.ts
@@ -47,6 +47,15 @@ import {expect} from '@angular/platform-browser/testing/src/matchers';
       expect(doc.head).toHaveText('a {};b {};');
     });
 
+    it('should remove style nodes when the host is removed', () => {
+      ssh.addStyles(['a {};']);
+      ssh.addHost(someHost);
+      expect(someHost.innerHTML).toEqual('<style>a {};</style>');
+
+      ssh.removeHost(someHost);
+      expect(someHost.innerHTML).toEqual('');
+    });
+
     it('should remove style nodes on destroy', () => {
       ssh.addStyles(['a {};']);
       ssh.addHost(someHost);

Original file line number	Diff line number	Diff line change
`@@ -1430,6 +1430,9 @@`
`1430`	`1430`	`{`
`1431`	`1431`	`"name": "removeListItem"`
`1432`	`1432`	`},`
	`1433`	`+ {`
	`1434`	`+ "name": "removeStyle"`
	`1435`	`+ },`
`1433`	`1436`	`{`
`1434`	`1437`	`"name": "renderComponent"`
`1435`	`1438`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1394,6 +1394,9 @@`
`1394`	`1394`	`{`
`1395`	`1395`	`"name": "removeListItem"`
`1396`	`1396`	`},`
	`1397`	`+ {`
	`1398`	`+ "name": "removeStyle"`
	`1399`	`+ },`
`1397`	`1400`	`{`
`1398`	`1401`	`"name": "renderComponent"`
`1399`	`1402`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1832,6 +1832,9 @@`
`1832`	`1832`	`{`
`1833`	`1833`	`"name": "removeFromArray"`
`1834`	`1834`	`},`
	`1835`	`+ {`
	`1836`	`+ "name": "removeStyle"`
	`1837`	`+ },`
`1835`	`1838`	`{`
`1836`	`1839`	`"name": "renderComponent"`
`1837`	`1840`	`},`