如何在 Angular 的 ViewenCapsulation.ShadowDom 模式中使用 ::slotted？答案

【问题标题】：How to use ::slotted inside ViewCapsulation.ShadowDom mode in Angular?如何在 Angular 的 ViewenCapsulation.ShadowDom 模式中使用 ::slotted？
【发布时间】：2019-11-14 20:37:42
【问题描述】：

我添加了::ng-deep 组合器，用于在我的组件中引用内容投影元素。但是当我从默认（ViewEncapsulation.Emulated）切换到ViewEncapsulation.ShadowDom 模式时，显然::ng-deep 不是本机Shadow DOM 选择器，旧的CSS 不起作用。

/* This works in ViewEncapsulation.Emulated */
:host ::ng-deep .course-description {
  max-width: 360px;
  margin: 0 auto;
  margin-top: 15px;
  user-select: none;
}

令人惊讶的是，当我在 Chrome v75.0.3770.100 中使用 /deep/ 组合器（在 Chrome v63 中删除 https://developers.google.com/web/updates/2017/10/remove-shadow-piercing）时，ViewEncapsulation.ShadowDom 工作正常

/* This works in ViewEncapsulation.ShadowDom */
:host /deep/ .course-description {
  max-width: 360px;
  margin: 0 auto;
  margin-top: 15px;
  user-select: none;
}

是否可以在组件 CSS 中使用 ::slotted() 使其像以前一样工作但在 ViewEncapsulation.ShadowDom 模式下工作？如果是，怎么做？

【问题讨论】：

标签： css angular shadow-dom

【解决方案1】：

你运气不好。 ::slotted 不受 .Emulated 支持。但是它支持。原生

ng-deep 也被弃用了，而且还没有计划替换。

不推荐使用穿透阴影的后代组合器，支持被从主要浏览器和工具中删除。因此，我们计划放弃在 Angular 中的支持（适用于所有 3 个 /deep/、>>> 和 ::ng-deep）。

我仍然不确定，他们是在研究解决方案还是只是想让我们忘记它。

【讨论】：

请注意，::ng-deep 是“最少弃用”的选项，因为它始终是一个纯粹的角度特征，而不是直接基于 shadow dom 规范。您可以找到的大多数答案都令人头疼，最终导致 Angular 没有不推荐使用的穿孔选择器替代方案。 You can check up on the deprecation status of these features here