fix(compiler): preserve attributes attached to :host selector (#57796)

GeorgySerga · devversion · commit aea747ab3bcb · 2024-10-10T08:13:23.000Z
keep attributes used to scope :host selectors PR Close #57796
diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
@@ -804,7 +804,7 @@ export class ShadowCss {
           cssPrefixWithPseudoSelectorFunctionMatch;
         const hasOuterHostNoCombinator = mainSelector.includes(_polyfillHostNoCombinator);
         const scopedMainSelector = mainSelector.replace(
-          _polyfillHostNoCombinatorReGlobal,
+          _polyfillExactHostNoCombinatorReGlobal,
           `[${hostSelector}]`,
         );
 
@@ -982,6 +982,7 @@ const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
 const _polyfillHostNoCombinatorWithinPseudoFunction = new RegExp(
   `:.*(.*${_polyfillHostNoCombinator}.*)`,
 );
+const _polyfillExactHostNoCombinatorReGlobal = /-shadowcsshost-no-combinator/g;
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 const _polyfillHostNoCombinatorReGlobal = new RegExp(_polyfillHostNoCombinatorRe, 'g');
 const _shadowDOMSelectorsRe = [
diff --git a/packages/compiler/test/shadow_css/shadow_css_spec.ts b/packages/compiler/test/shadow_css/shadow_css_spec.ts
@@ -67,7 +67,17 @@ describe('ShadowCss', () => {
     expect(shim('one[attr] {}', 'contenta')).toEqualCss('one[attr][contenta] {}');
     expect(shim('[is="one"] {}', 'contenta')).toEqualCss('[is="one"][contenta] {}');
     expect(shim('[attr] {}', 'contenta')).toEqualCss('[attr][contenta] {}');
+  });
+
+  it('should transform :host with attributes and pseudo selectors', () => {
     expect(shim(':host [attr] {}', 'contenta', 'hosta')).toEqualCss('[hosta] [attr][contenta] {}');
+    expect(shim(':host(create-first-project) {}', 'contenta', 'hosta')).toEqualCss(
+      'create-first-project[hosta] {}',
+    );
+    expect(shim(':host[attr] {}', 'contenta', 'hosta')).toEqualCss('[attr][hosta] {}');
+    expect(shim(':host[attr]:where(:not(.cm-button)) {}', 'contenta', 'hosta')).toEqualCss(
+      '[hosta][attr]:where(:not(.cm-button)) {}',
+    );
   });
 
   it('should handle escaped sequences in selectors', () => {
