refactor(platform-browser): avoid duplicate styles when re-adding a host in SharedStylesHost

dgp1130 · dgp1130 · commit d78e646985fc · 2026-03-25T10:40:26.000-07:00
`SharedStylesHost` has a known bug where removing hosts does not remove styles from the DOM and fixing that would be a breaking change. However, this leads to a separate bug where removing a style down to zero usages and then adding an extra one, could duplicate styles on the page. This commit ensures styles are only appended if they aren't already present on the parent node from a previously leaked style.
diff --git a/packages/platform-browser/src/dom/shared_styles_host.ts b/packages/platform-browser/src/dom/shared_styles_host.ts
@@ -219,10 +219,18 @@ export class SharedStylesHost implements ɵSharedStylesHost, OnDestroy {
     if (existingUsage === 0) {
       // Add existing styles to new host
       for (const [style, {elements}] of this.inline) {
-        elements.push(this.addElement(hostNode, createStyleElement(style, this.doc)));
+        // `removeHost` currently does not actually remove styles when usage drops to zero.
+        // Therefore removing a host to zero and then re-adding to one, could cause Angular
+        // to duplicate the styles on the page. This check makes sure we don't add the styles
+        // more than once.
+        if (!elements.some((e) => e.parentNode === hostNode)) {
+          elements.push(this.addElement(hostNode, createStyleElement(style, this.doc)));
+        }
       }
       for (const [url, {elements}] of this.external) {
-        elements.push(this.addElement(hostNode, createLinkElement(url, this.doc)));
+        if (!elements.some((e) => e.parentNode === hostNode)) {
+          elements.push(this.addElement(hostNode, createLinkElement(url, this.doc)));
+        }
       }
     }
 
diff --git a/packages/platform-browser/test/dom/shared_styles_host_spec.ts b/packages/platform-browser/test/dom/shared_styles_host_spec.ts
@@ -54,6 +54,20 @@ describe('SharedStylesHost', () => {
       expect(someHost.innerHTML).not.toContain('<style>c {};</style>');
     });
 
+    it('should not duplicate styles when removing *all hosts* and then re-adding a pre-existing host', () => {
+      ssh.addHost(someHost);
+      ssh.addStyles(['a {};']);
+      expect(someHost.innerHTML).toEqual('<style>a {};</style>');
+
+      // Reproduce undesirable, but known leak.
+      ssh.removeHost(someHost);
+      expect(someHost.innerHTML).toEqual('<style>a {};</style>');
+
+      // Should not duplicate.
+      ssh.addHost(someHost);
+      expect(someHost.innerHTML).toEqual('<style>a {};</style>');
+    });
+
     it('should add styles only once to hosts', () => {
       ssh.addStyles(['a {};']);
       ssh.addHost(someHost);
@@ -129,6 +143,20 @@ describe('SharedStylesHost', () => {
       expect(someHost.innerHTML).not.toContain('<link rel="stylesheet" href="component-3.css">');
     });
 
+    it('should not duplicate styles when removing and re-adding a host', () => {
+      ssh.addStyles([], ['component-1.css']);
+      ssh.addHost(someHost);
+      expect(someHost.innerHTML).toEqual('<link rel="stylesheet" href="component-1.css">');
+
+      // Reproduce undesirable, but known leak.
+      ssh.removeHost(someHost);
+      expect(someHost.innerHTML).toEqual('<link rel="stylesheet" href="component-1.css">');
+
+      // Should not duplicate
+      ssh.addHost(someHost);
+      expect(someHost.innerHTML).toEqual('<link rel="stylesheet" href="component-1.css">');
+    });
+
     it('should add styles only once to hosts', () => {
       ssh.addStyles([], ['component-1.css']);
       ssh.addHost(someHost);
