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

Question

我添加了 ::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;
}

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

/* 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 模式下？如果是，如何？

Answer 1

你运气不好。 .Emulated 不支持::slotted。然而，它得到了支持。原生

ng-deep 也被弃用了，据我所知，目前还没有替代计划。

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep).

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