Angular ShadowDom封装下，除全局样式与修改封装外，::ng-deep的替代方案？

不用全局样式或修改封装模式的话，试试这几种方法：

• 用组件自身的样式输入能力
  很多UI组件都会提供自定义样式的入口，比如支持ngClass绑定、内联样式，或者专门的主题配置属性。你可以查下sc-menu的文档，看能不能直接给组件传类名或样式：

<sc-menu class="custom" [style.background-color]="'#f5f5f5'"></sc-menu>

要是组件支持这种方式，这是最合规也最简单的做法。

• 利用CSS Shadow Parts规范
  如果sc-menu在封装时给内部可样式化的元素加了part属性（比如<div part="menu-bg">），你可以用::part()伪元素来穿透ShadowDom修改样式：

sc-menu::part(menu-bg) {
  background-color: #f5f5f5;
}

这是ShadowDom官方推荐的样式穿透方式，比::ng-deep更符合标准规范。

• 通过JS直接操作ShadowDom元素
  用ViewChild拿到sc-menu的实例，然后通过ShadowDom API访问内部元素，动态修改样式或添加类：
  组件类代码：

import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';

export class MenuComponent implements AfterViewInit {
  @ViewChild('targetMenu') targetMenu!: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    const shadowRoot = this.targetMenu.nativeElement.shadowRoot;
    if (shadowRoot) {
      const customMenu = shadowRoot.querySelector('.custom');
      if (customMenu) {
        customMenu.style.backgroundColor = '#f5f5f5';
        // 也可以加组件内定义的类
        customMenu.classList.add('local-custom-bg');
      }
    }
  }
}

模板代码：

<sc-menu #targetMenu></sc-menu>

组件样式里定义类：

.local-custom-bg {
  background-color: #f5f5f5;
}

内容的提问来源于stack exchange，提问作者Cynthia