css - 在不破坏向前兼容性的情况下定位 Shadow DOM 元素

Question

我正在尝试定位由 mat-menu 创建的 Angular Shadow DOM 元素，如下所示:

$google: #133700

.mat-menu-content {
    background-color: $google;
}

但是，这是行不通的。我被告知 /deep CSS 选择器可能对此有帮助(这只是将 /deep/ 选择器添加到上面的情况？)但是 /deep/ 正在被弃用，以至于当软件准备就绪时它可能已经与现代浏览器不兼容，因此目前它并不是一个真正合适的解决方案。任何人都可以建议一种替代方法来定位 Angular 中的 Shadow DOM 元素吗？

Answer 1

/deep/ 从 CSS 标准中弃用。 Angular 等效项是 ::ng-deep。它将穿透模拟封装(当然不是原生封装)。

::ng-deep .mat-menu-content {
    background-color: $google;
}