From aea747ab3bcbca79dbbc7ddfc41e11b9e43952eb Mon Sep 17 00:00:00 2001
From: Georgy Serga <georgy.serga@gmail.com>
Date: Mon, 23 Sep 2024 17:55:48 +0000
Subject: [PATCH] fix(compiler): preserve attributes attached to :host selector
 (#57796)

keep attributes used to scope :host selectors

PR Close #57796
---
 packages/compiler/src/shadow_css.ts                  |  3 ++-
 packages/compiler/test/shadow_css/shadow_css_spec.ts | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
index 9e10d60d87e..1d338569563 100644
--- 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
index ff70c407b2a..573af918520 100644
--- 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', () => {