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

Question

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

In:/ deep /和:: shadow在CSS选择器中的含义是什么？

我们看:

正如Joel H.在评论中指出的那样,Chrome已经弃用了/ deep/combinator,并且在IE中给出了语法错误.

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

我们看:

/深/不再存在,所以我认为我们不应该支持它.>>>是新版本,应该可以支持

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

我们看:

/ deep/selector也有别名>>>.我们可以互换使用两者中的任何一个.

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

事实上,在最新版本的Microsoft Visual Studio Code中,BOTH /deep/并>>>创建了错误,尽管它们都能正常工作,尽管有错误.

我的问题是双重的:

1. 是/深/这里留下来？我们是否有任何来源,报价或任何规范中的任何内容表明它将被采用？或者如果它已被正式弃用？

2. 我们可以在没有全部禁用语法检查的情况下在Visual Studio代码中抑制此错误吗？

Answer 1

1. 是/深/这里留下来？我们是否有任何来源,报价或任何规范中的任何内容表明它将被采用？或者如果它已被正式弃用？

   该/deep/语法是过时的,最后一次出现在CSS-范围界定在2014年,它的更换>>>大约半年前被废弃在Chrome 45.

   阴影穿透后代组合器的整个概念将被完全从Shadow DOM中移除.实现可以将它完全删除或将其别名化为常规后代组合器(这取决于将来如何实现Shadow DOM可能有意义也可能没有意义).

2. 我们可以在没有全部禁用语法检查的情况下在Visual Studio代码中抑制此错误吗？

   不幸的是.

   为了兼容性目的,Angular允许在模拟视图封装中使用,但强烈建议作者继续使用>>>,因为/deep/技术上现在无效,因此在本机视图封装中不受支持.

Answer 2

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

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

可以使用的，更正式的而不是不推荐使用的是:: host（）和:: host-context

此外，根据Google的说法，:: ng-deep不会被弃用，并且将继续是可行的选择。因此，首选使用:: ng-deep。

/ deep /组合器还具有别名>>>和:: ng-deep。

/ deep /，>>>和:: ng-deep仅与模拟视图封装一起使用。默认是最常用的视图封装。有关更多信息，请参见“控制视图封装”部分。不推荐使用穿刺阴影的后代组合器，并且从主要的浏览器和工具中删除了对它的支持。因此，我们计划放弃对Angular的支持（针对/ deep /，>>>和:: ng-deep的全部3个）。在此之前，应首选:: ng-deep以获得与工具的广泛兼容性。