CSS /deep/ 和 >>> 在 Angular 2 中的使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42134355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The use of /deep/ and >>> in Angular 2
提问by Kevin
I've been reading up on this selector, and getting conflicting answers.
我一直在阅读这个选择器，并得到相互矛盾的答案。
In: What do /deep/ and ::shadow mean in a CSS selector?
在：CSS 选择器中的 /deep/ 和 ::shadow 是什么意思？
We see:
我们看：
As Joel H. points out in the comments, Chrome has since deprecated the /deep/ combinator, and it gives a syntax error in IE.
正如 Joel H. 在评论中指出的那样，Chrome 已弃用 /deep/ 组合器，并且在 IE 中出现语法错误。
In: https://github.com/Microsoft/vscode/issues/7002
在：https: //github.com/Microsoft/vscode/issues/7002
We see:
我们看：
/deep/ no longer exists, so I don't think we should support it. >>> is the new version, which should probably be supported
/deep/ 不再存在，所以我认为我们不应该支持它。>>> 是新版本，应该会支持
However, in the Angular 2 docs: https://angular.io/docs/ts/latest/guide/component-styles.html
但是，在 Angular 2 文档中：https: //angular.io/docs/ts/latest/guide/component-styles.html
We see:
我们看：
The /deep/ selector also has the alias >>>. We can use either of the two interchangeably.
/deep/ 选择器也有别名 >>>。我们可以互换使用两者中的任何一个。
Obviously it would be wise to trust the Angular 2 docs, but I'm a bit hesitant because of all this conflicting information.
显然，信任 Angular 2 文档是明智之举，但由于所有这些相互矛盾的信息，我有点犹豫。
In fact, in the latest version of Microsoft Visual Studio Code, BOTH /deep/and >>>create errors, though they both do work despite the errors.
事实上，在Microsoft Visual Studio代码的最新版本，无论是/deep/和>>>创建错误，但是他们都做的工作，尽管错误。
My question is twofold:
我的问题是双重的：
Is /deep/ here to stay? Do we have any source, a quote, or anything from any specification saying that it will be adopted? Or if it has officially been deprecated?
Can we suppress this error in Visual Studio Code without all-together disabling syntax checking?
/deep/ 会留下来吗？我们是否有任何来源、引用或任何规范中的任何内容表明它将被采用？或者如果它已被正式弃用？
我们可以在不完全禁用语法检查的情况下在 Visual Studio Code 中抑制此错误吗？
采纳答案by BoltClock
Is /deep/ here to stay? Do we have any source, a quote, or anything from any specification saying that it will be adopted? Or if it has officially been deprecated?
The
/deep/syntax is obsolete, last seen in css-scoping in 2014, and its replacement>>>was deprecated about half a year ago in Chrome 45.The entire concept of the shadow-piercing descendant combinator is slated to be removed from the Shadow DOM entirely. Implementations may either remove it altogether or alias it to the regular descendant combinator (which depending on how the Shadow DOM is implemented in the future may or may not make sense).
Can we suppress this error in Visual Studio Code without all-together disabling syntax checking?
Unfortunately not.
Angular allows both in emulated view encapsulation for compatibility purposes, but authors are strongly encouraged to use
>>>going forward, since/deep/is technically invalid now, and therefore unsupported in native view encapsulation.
/deep/ 会留下来吗？我们是否有任何来源、引用或任何规范中的任何内容表明它将被采用？或者如果它已被正式弃用？
该
/deep/语法已过时，最后一次出现在 css-scoping于 2014 年，>>>大约半年前在 Chrome 45 中弃用了它的替代。贯穿阴影的后代组合器的整个概念将完全从 Shadow DOM 中删除。实现可能会完全删除它或将其别名为常规后代组合器（这取决于将来如何实现 Shadow DOM 可能有意义也可能没有意义）。
我们可以在不完全禁用语法检查的情况下在 Visual Studio Code 中抑制此错误吗？
不幸的是没有。
出于兼容性目的，Angular 允许在模拟视图封装中使用这两种方法，但强烈建议作者继续使用
>>>，因为/deep/现在技术上无效，因此在本机视图封装中不受支持。
回答by Christian Matthew
According to the google documentation all major browsers are going to deprecate all functionality of said feature. Therefore, the shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools.
根据谷歌文档，所有主要浏览器都将弃用该功能的所有功能。因此，不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。
https://angular.io/guide/component-styles
https://angular.io/guide/component-styles
What can be used that is more offiical and not deprecaed is ::host() and ::host-context
可以使用的更正式且不被弃用的是 ::host() 和 ::host-context
Also, according to google ::ng-deep will not be deprecated and will continue to be a viable option. so using ::ng-deep will be preferred.
此外，根据 google ::ng-deep 不会被弃用，并将继续成为一个可行的选择。所以使用 ::ng-deep 将是首选。
The /deep/ combinator also has the aliases >>>, and ::ng-deep.
Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the Controlling view encapsulation section. 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). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
/deep/ 组合器还有别名 >>> 和 ::ng-deep。
仅在模拟视图封装中使用 /deep/、>>> 和 ::ng-deep。Emulated 是默认的也是最常用的视图封装。有关更多信息，请参阅控制视图封装部分。不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对于 /deep/、>>> 和 ::ng-deep 中的所有 3 个）。在那之前 ::ng-deep 应该是首选，因为它与工具更广泛地兼容。
