fix(platform-browser): remove unused styles when associated host is dropped

dgp1130 · atscott · commit d45b7a91f961 · 2026-04-06T11:48:14.000-07:00
This fixes a memory leak in `SharedStylesHost` where calling `removeHost` would leave any `&lt;style&gt;` or `&lt;link&gt;` tags associated with that host in the DOM. This is wasteful in general, and can create even more leaks if the same host is added and removed multiple times, causing styles to be consistently reappended but never removed.

BREAKING CHANGE: This removes styles when they appear to no longer be used by an associated `host`. However other DOM on the page may still be affected by those styles if not leveraging `ViewEncapsulation.Emulated` or if those styles are used by elements outside of Angular, potentially causing other DOM to appear unstyled.
diff --git a/packages/platform-browser/src/dom/shared_styles_host.ts b/packages/platform-browser/src/dom/shared_styles_host.ts
@@ -226,6 +226,18 @@ export class SharedStylesHost implements OnDestroy {
 
   removeHost(hostNode: Node): void {
     this.hosts.delete(hostNode);
+
+    for (const record of [...this.inline.values(), ...this.external.values()]) {
+      const remaining: Array<HTMLStyleElement | HTMLLinkElement> = [];
+      for (const element of record.elements) {
+        if (element.parentNode === hostNode) {
+          element.remove();
+        } else {
+          remaining.push(element);
+        }
+      }
+      record.elements = remaining;
+    }
   }
 
   private addElement<T extends HTMLElement>(host: Node, element: T): T {
diff --git a/packages/platform-browser/test/dom/shared_styles_host_spec.ts b/packages/platform-browser/test/dom/shared_styles_host_spec.ts
@@ -142,4 +142,31 @@ describe('SharedStylesHost', () => {
       expect(doc.head.innerHTML).not.toContain('ng-app-id');
     });
   });
+
+  describe('removeHost', () => {
+    it('should remove inline style nodes from the host', () => {
+      ssh.addStyles(['a {}']);
+      ssh.addHost(someHost);
+      expect(someHost.innerHTML).toEqual('<style>a {}</style>');
+
+      ssh.removeHost(someHost);
+      expect(someHost.innerHTML).toEqual('');
+    });
+
+    it('should remove external style nodes from the host', () => {
+      ssh.addStyles([], ['component.css']);
+      ssh.addHost(someHost);
+      expect(someHost.innerHTML).toEqual('<link rel="stylesheet" href="component.css">');
+
+      ssh.removeHost(someHost);
+      expect(someHost.innerHTML).toEqual('');
+    });
+
+    it('should not add new styles to the host after removal', () => {
+      ssh.addHost(someHost);
+      ssh.removeHost(someHost);
+      ssh.addStyles(['a {}']);
+      expect(someHost.innerHTML).toEqual('');
+    });
+  });
 });
