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

Question

我正在尝试定位由 mat-menu 创建的 Angular 阴影 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;
}

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

Targeting a Shadow DOM element without breaking forwards compatibility

css

dom

css-selectors

shadow-dom

angular