fix(compiler): support commas in :host() argument

mattrbeck · AndrewKushnir · commit 106b9040dfe0 · 2025-11-10T07:49:19.000-08:00
This change adds support for commas in :host() arguments (e.g.
`:host(:not(.foo, .bar))` as well as in nested parens when the argument
is applied without parens (e.g. `:host:not(:has(.foo, .bar))`).
Previously these selectors would receive an extra `[nghost]` attr, e.g.
`[nghost]:not(.foo, [nghost].bar)`.

I didn't file a bug for this one, but it's also blocking on an internal
LSC. Like the other CSS changes, I'll run a TGP to confirm this isn't
breaking.
diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
@@ -512,11 +512,13 @@ export class ShadowCss {
     return cssText.replace(_cssColonHostRe, (_, hostSelectors: string, otherSelectors: string) => {
       if (hostSelectors) {
         const convertedSelectors: string[] = [];
-        const hostSelectorArray = hostSelectors.split(',').map((p) => p.trim());
-        for (const hostSelector of hostSelectorArray) {
-          if (!hostSelector) break;
+        for (const hostSelector of this._splitOnTopLevelCommas(hostSelectors)) {
+          const trimmedHostSelector = hostSelector.trim();
+          if (!trimmedHostSelector) break;
           const convertedSelector =
-            _polyfillHostNoCombinator + hostSelector.replace(_polyfillHost, '') + otherSelectors;
+            _polyfillHostNoCombinator +
+            trimmedHostSelector.replace(_polyfillHost, '') +
+            otherSelectors;
           convertedSelectors.push(convertedSelector);
         }
         return convertedSelectors.join(',');
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
@@ -101,6 +101,12 @@ describe('ShadowCss, :host and :host-context', () => {
       expect(shim(':host:not(.foo, .bar) {}', 'contenta', 'a-host')).toEqualCss(
         '[a-host]:not(.foo, .bar) {}',
       );
+      expect(shim(':host:not(:has(p, a)) {}', 'contenta', 'a-host')).toEqualCss(
+        '[a-host]:not(:has(p, a)) {}',
+      );
+      expect(shim(':host(:not(.foo, .bar)) {}', 'contenta', 'a-host')).toEqualCss(
+        '[a-host]:not(.foo, .bar) {}',
+      );
     });
 
     // see b/63672152
