不破坏向前兼容性的Shadow DOM元素定位方案

我完全懂你的顾虑——/deep/确实已经被弃用，用它上线的话，未来浏览器更新可能就会出问题。针对Angular Material的mat-menu这类Shadow DOM元素的定位和样式/操作需求，这里有几个靠谱的替代方案，都是符合现代规范的：

1. 带:host限定的::ng-deep（当前最稳妥的样式穿透方案） #

虽然::ng-deep也被标记为“将来会被移除”，但目前Angular官方仍在提供支持，而且只要配合:host使用，就能严格限制样式作用范围，避免全局污染，是当前生产环境可用的过渡方案：

/* 只作用于当前组件内的mat-menu */
:host ::ng-deep .mat-menu-content {
  background-color: #f0f0f0;
  padding: 8px 0;
}

:host确保样式仅生效在当前组件的宿主元素范围内，不会影响其他组件的mat-menu。

2. 利用Angular Material内置的CSS变量（最推荐的样式方案） #

Angular Material的大部分组件都暴露了可自定义的CSS变量，无需穿透Shadow DOM就能直接修改样式，这是最符合规范且无兼容性风险的方法：

/* 在包裹mat-menu的容器上设置变量 */
.your-menu-wrapper {
  --mat-menu-background-color: #f0f0f0;
  --mat-menu-item-text-color: #333;
  --mat-menu-item-hover-background-color: #e0e0e0;
}

这些变量会自动渗透到mat-menu的Shadow DOM内部，直接覆盖默认样式，你可以在Angular Material的官方文档里找到对应组件的所有可用CSS变量。

3. 关闭组件的样式隔离（谨慎使用） #

如果你的组件不需要Angular的样式封装，可以将ViewEncapsulation设置为None，这样组件内的样式会成为全局样式，自然能作用到Shadow DOM元素。但一定要给样式加上足够具体的选择器，避免全局样式冲突：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-custom-menu',
  templateUrl: './custom-menu.component.html',
  styleUrls: ['./custom-menu.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CustomMenuComponent { }

对应的CSS：

/* 用组件选择器限定作用范围 */
app-custom-menu .mat-menu-content {
  background-color: #f0f0f0;
}

这种方法只适合小范围、样式独立的组件，否则很容易引发全局样式混乱。

4. 通过模板引用变量+Renderer2操作Shadow DOM元素（针对DOM操作需求） #

如果你的需求不是修改样式，而是要定位并操作Shadow DOM内的元素（比如绑定事件、修改内容），可以通过模板引用变量获取mat-menu实例，再用Angular的Renderer2安全访问Shadow DOM：

模板代码： #

<button mat-button [matMenuTriggerFor]="myMenu">打开菜单</button>
<mat-menu #myMenu="matMenu">
  <button mat-menu-item>菜单项1</button>
</mat-menu>

组件类代码： #

import { Component, ViewChild, Renderer2, AfterViewInit } from '@angular/core';
import { MatMenu } from '@angular/material/menu';

@Component({
  selector: 'app-menu-operation',
  templateUrl: './menu-operation.component.html',
  styleUrls: ['./menu-operation.component.css']
})
export class MenuOperationComponent implements AfterViewInit {
  @ViewChild('myMenu') menuInstance!: MatMenu;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit(): void {
    // 获取mat-menu的原生DOM元素
    const menuNativeElement = this.menuInstance.menuElement.nativeElement;
    // 访问Shadow Root
    const shadowRoot = menuNativeElement.shadowRoot;
    
    if (shadowRoot) {
      // 定位Shadow DOM内的元素
      const menuContent = shadowRoot.querySelector('.mat-menu-content');
      if (menuContent) {
        // 示例：给元素添加自定义类
        this.renderer.addClass(menuContent, 'custom-menu-styles');
      }
    }
  }
}

这种方法通过Angular官方API访问Shadow DOM，符合现代浏览器的安全规范，不会有兼容性问题。

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