refactor(compiler): remove dedicated support for legacy shadow DOM selectors

mattrbeck · mattrbeck · commit 9ee8c8cec793 · 2026-05-10T18:44:57.000-07:00
Remove `_shadowDOMSelectorsRe` and `_convertShadowDOMSelectors` from `shadow_css.ts` so that `::shadow`, `::content`, `/shadow-deep/`, and `/shadow/` are no longer treated specially or stripped from user CSS. Instead, they are naturally scoped like standard selectors. Also remove the legacy failing test from `shadow_css_spec.ts`.
diff --git a/packages/compiler/src/shadow_css.ts b/packages/compiler/src/shadow_css.ts
@@ -466,7 +466,6 @@ export class ShadowCss {
     cssText = this._insertPolyfillHostInCssText(cssText);
     cssText = this._convertColonHost(cssText);
     cssText = this._convertColonHostContext(cssText);
-    cssText = this._convertShadowDOMSelectors(cssText);
     if (scopeSelector) {
       cssText = this._scopeKeyframesRelatedCss(cssText, scopeSelector);
       cssText = this._scopeSelectors(cssText, scopeSelector, hostSelector);
@@ -666,14 +665,6 @@ export class ShadowCss {
     });
   }
 
-  /*
-   * Convert combinators like ::shadow and pseudo-elements like ::content
-   * by replacing with space.
-   */
-  private _convertShadowDOMSelectors(cssText: string): string {
-    return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);
-  }
-
   // change a selector like 'div' to 'name div'
   private _scopeSelectors(cssText: string, scopeSelector: string, hostSelector: string): string {
     return processRules(cssText, (rule: CssRule) => {
@@ -1092,13 +1083,6 @@ const _polyfillHostNoCombinatorOutsidePseudoFunction = new RegExp(
   'g',
 );
 const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s,]*)/;
-const _shadowDOMSelectorsRe = [
-  /::shadow/g,
-  /::content/g,
-  // Deprecated selectors
-  /\/shadow-deep\//g,
-  /\/shadow\//g,
-];
 
 // The deep combinator is deprecated in the CSS spec
 // Support for `>>>`, `deep`, `::ng-deep` is then also deprecated and will be removed in the future.
diff --git a/packages/compiler/test/shadow_css/shadow_css_spec.ts b/packages/compiler/test/shadow_css/shadow_css_spec.ts
@@ -322,11 +322,6 @@ describe('ShadowCss', () => {
     expect(shim('.pr\\fc fung {}', 'contenta')).toEqual('.pr\\fc fung[contenta] {}');
   });
 
-  it('should handle ::shadow', () => {
-    const css = shim('x::shadow > y {}', 'contenta');
-    expect(css).toEqualCss('x[contenta] > y[contenta] {}');
-  });
-
   it('should leave calc() unchanged', () => {
     const styleStr = 'div {height:calc(100% - 55px);}';
     const css = shim(styleStr, 'contenta');
