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

mattrbeck · mattrbeck · commit 417dea23cf84 · 2026-05-10T19:10:03.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`.
diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
@@ -511,20 +511,17 @@ 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 hostSelector = this._splitOnTopLevelCommas(hostSelectors, true).next().value;
+        const trimmedHostSelector = hostSelector ? hostSelector.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,30 +41,10 @@ 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 handle multiple attribute selectors', () => {
-      expect(shim(':host([a="b"],[c=d]) {}', 'contenta', 'a-host')).toEqualCss(
-        '[a="b"][a-host], [c=d][a-host] {}',
-      );
-    });
-
     it('should handle pseudo selectors', () => {
       expect(shim(':host(:before) {}', 'contenta', 'a-host')).toEqualCss('[a-host]:before {}');
       expect(shim(':host:before {}', 'contenta', 'a-host')).toEqualCss('[a-host]:before {}');
