Angular 2 中 /deep/ 和 >>> 的使用

Question

我一直在阅读这个选择器，得到的答案相互矛盾。

在：What do /deep/ and ::shadow mean in a CSS selector?

我们看到了：

正如 Joel H. 在 cmets 中指出的那样，Chrome 已经弃用 /deep/ 组合器，它在 IE 中给出了语法错误。

在：https://github.com/Microsoft/vscode/issues/7002

我们看到了：

/deep/ 不再存在，所以我认为我们不应该支持它。 >>> 是 新版本，应该会支持

但是，在 Angular 2 文档中：https://angular.io/docs/ts/latest/guide/component-styles.html

我们看到了：

/deep/ 选择器也有别名 >>>。我们可以使用任何一个 两个可以互换。

显然，相信 Angular 2 文档是明智的，但由于所有这些相互矛盾的信息，我有点犹豫。

事实上，在最新版本的 Microsoft Visual Studio Code 中，/deep/ 和 >>> 都会产生错误，尽管尽管出现错误，它们都可以正常工作。

我的问题有两个：

1. /deep/ 会继续存在吗？我们是否有任何来源、引用或任何规范中的任何内容表明它将被采用？或者如果它已被正式弃用？

2. 我们能否在不完全禁用语法检查的情况下抑制 Visual Studio Code 中的此错误？

Answer 1

有修复错误的解决方案，在/deep/之前添加:host

:host /deep/ .mat-slide-toggle-bar{

    background-color: #299DFF;
    padding: botton 20px;
}​

Answer 2

1. /deep/ 会留下来吗？我们是否有任何来源、引用或任何规范中的任何内容表明它将被采用？或者如果它已被正式弃用？

   /deep/ 语法已过时，最后一次出现在 css-scoping in 2014，它的替代 >>> 在大约半年前的 Chrome 45 中被弃用。

   阴影穿透后代组合器的整个概念是slated to be removed from the Shadow DOM entirely。实现可以将其完全删除，也可以将其别名为常规后代组合器（这取决于将来如何实现 Shadow DOM 可能有意义，也可能没有意义）。

2. 我们能否在不完全禁用语法检查的情况下抑制 Visual Studio Code 中的此错误？

   很遗憾没有。

   出于兼容性目的，Angular 允许在模拟视图封装中进行这两种操作，但强烈建议作者继续使用>>>，因为/deep/ 现在在技术上无效，因此在本机视图封装中不受支持。

Answer 3

根据 google 文档，所有主要浏览器都将弃用该功能的所有功能。因此，不推荐使用穿透阴影的后代组合器，并且正在从主要浏览器和工具中删除支持。

https://angular.io/guide/component-styles

可以使用更官方且不被弃用的是 ::host() 和 ::host-context

此外，根据谷歌的说法 ::ng-deep 不会被弃用，并将继续是一个可行的选择。所以使用 ::ng-deep 将是首选。

/deep/ 组合子也有别名 >>> 和 ::ng-deep。

仅在模拟视图封装中使用 /deep/、>>> 和 ::ng-deep。 Emulated 是默认和最常用的视图封装。有关详细信息，请参阅控制视图封装部分。 不推荐使用穿透阴影的后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对 /deep/、>>> 和 ::ng-deep 的所有 3 个）。在此之前 ::ng-deep 应该是首选，以便与工具更广泛地兼容。