fix(compiler): simplify handling of colon host with a selector list

mattrbeck · mattrbeck · commit 7dc1017e517c · 2026-05-12T14:25:49.000-07:00
Update `_convertColonHost` to extract and use only the first argument from a `:host(...)` selector list, ignoring subsequent arguments instead of splitting and duplicating the selector list. Also remove the obsolete test cases from `host_and_host_context_spec.ts`. (cherry picked from commit 1d3bf59)
diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
@@ -434,20 +434,20 @@ export class ShadowCss {
   private _convertColonHost(cssText: string): string {
     return cssText.replace(_cssColonHostRe, (_, hostSelectors: string, otherSelectors: string) => {
       if (hostSelectors) {
-        const convertedSelectors: string[] = [];
-        for (const hostSelector of this._splitOnTopLevelCommas(hostSelectors, true)) {
-          const trimmedHostSelector = hostSelector.trim();
-          if (!trimmedHostSelector) break;
-          const convertedSelector =
+        const parts = [...this._splitOnTopLevelCommas(hostSelectors, true)];
+        if (parts.length > 1) {
+          return ':host(' + hostSelectors + ')' + otherSelectors;
+        }
+        const trimmedHostSelector = parts[0].trim();
+        if (trimmedHostSelector) {
+          return (
             _polyfillHostNoCombinator +
             trimmedHostSelector.replace(_polyfillHost, '') +
-            otherSelectors;
-          convertedSelectors.push(convertedSelector);
+            otherSelectors
+          );
         }
-        return convertedSelectors.join(',');
-      } else {
-        return _polyfillHostNoCombinator + otherSelectors;
       }
+      return _polyfillHostNoCombinator + otherSelectors;
     });
   }
 
diff --git a/packages/compiler/test/shadow_css/host_and_host_context_spec.ts b/packages/compiler/test/shadow_css/host_and_host_context_spec.ts
@@ -41,27 +41,16 @@ describe('ShadowCss, :host and :host-context', () => {
       expect(shim(':host.pr\\fc fung {}', 'contenta', 'a-host')).toEqual('.pr\\fc fung[a-host] {}');
     });
 
-    it('should handle multiple tag selectors', () => {
-      expect(shim(':host(ul,li) {}', 'contenta', 'a-host')).toEqualCss('ul[a-host], li[a-host] {}');
-      expect(shim(':host(ul,li) > .z {}', 'contenta', 'a-host')).toEqualCss(
-        'ul[a-host] > .z[contenta], li[a-host] > .z[contenta] {}',
-      );
-    });
-
     it('should handle compound class selectors', () => {
       expect(shim(':host(.a.b) {}', 'contenta', 'a-host')).toEqualCss('.a.b[a-host] {}');
     });
 
-    it('should handle multiple class selectors', () => {
-      expect(shim(':host(.x,.y) {}', 'contenta', 'a-host')).toEqualCss('.x[a-host], .y[a-host] {}');
-      expect(shim(':host(.x,.y) > .z {}', 'contenta', 'a-host')).toEqualCss(
-        '.x[a-host] > .z[contenta], .y[a-host] > .z[contenta] {}',
+    it('should ignore :host with a selector list containing top-level commas', () => {
+      expect(shim(':host(.a, .b) {}', 'contenta', 'a-host')).toEqualCss(
+        '[contenta]:host(.a, .b) {}',
       );
-    });
-
-    it('should handle multiple attribute selectors', () => {
-      expect(shim(':host([a="b"],[c=d]) {}', 'contenta', 'a-host')).toEqualCss(
-        '[a="b"][a-host], [c=d][a-host] {}',
+      expect(shim('.outer :host(.a, .b) .inner {}', 'contenta', 'a-host')).toEqualCss(
+        '.outer[contenta] [contenta]:host(.a, .b) .inner[contenta] {}',
       );
     });
 
