Angular2-在样式中添加[_ngcontent-mav-x]

更新2

::slotted

现在，所有新浏览器都支持该功能，并且可以与`ViewEncapsulation.ShadowDom一起使用

https://developer.mozilla.org/zh-
CN/docs/Web/CSS/::slotted

更新

/deep/

并

>>>

已弃用。 ::ng-deep

取代它们。

::-deep

在源代码和文档中也被标记为已弃用，但这意味着它最终也会被删除。

我认为这取决于W3C为阴影DOM设置主题的方式（例如https://tabatkins.github.io/specs/css-shadow-
parts/
）

基本上，这是一种变通方法，直到所有浏览器都本机支持并且

ViewEncapsulation.Emulated

可以将其完全删除。

::ng-deep

在SASS中也受支持（或将取决于SASS实现）

原版的

视图封装有助于防止样式渗入或渗出组件。默认封装是

ViewEncapsulation.Emulated

将类之类

_ngcontent-mav-x

添加到组件标签中，并且样式也将重写为仅适用于匹配的类。

这在某种程度上模拟了影子DOM的默认行为。

您可以禁用此封装添加

encapsulation: ViewEncapsulation.None

到

@Component()

装饰器。

另一种方式是最近（重新）引入影子穿孔CSS组合程序

>>>

，

/deep/

和

::shadow

。引入这些组合器是为了对阴影DOM进行样式设置，但在那里不推荐使用。Angular最近介绍了它们，直到实现其他机制（如CSS变量）为止。又见https://github.com/angular/angular/pull/7563（https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17）

>>>

并且

/deep/

等效，并且使用此组合器使样式忽略添加的帮助器类（

_ngcontent-mav-x

）

* >>> my-component, * /deep/ my-component {  background-color: blue;}

应用于所有

my-component

标签，无论它们在其他组件中嵌套的深度如何。

some-component::shadow * {  background-color: green;}

适用于模板中的所有元素

some-component

，但不适用于其他后代。

它们也可以合并

* /deep/ my-component::shadow div {  background-color: blue;}

这适用于所有模板的

my-component

模板中的所有div元素，无论

my-component

嵌套在其他组件中的深度如何。

/deep/

，

>>>

和

::shadow

只能与

```
encapsulation: ViewEncapsulation.None
```

encapsulation: ViewEncapsulation.Emulated

```
encapsulation: ViewEncapsulation.Native
```
当浏览器本身支持它们时（Chrome会支持，但会在控制台中显示警告，表明它们已弃用），或者
浏览器本身不支持影子DOM并加载了web_components polyfills时。

对于一个简单的示例，也请参阅此问题中的Plunker
https://stackoverflow.com/a/36226061/217408

另请参阅ng-conf
2016上的此演示文稿

Angular2-在样式中添加[_ngcontent-mav-x]

面试问答相关栏目本月热门文章