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

Question

我正在设置一个基本的角度应用程序，并且试图在视图中添加一些CSS。这是我的组件之一的示例：

import { Component } from 'angular2/core';
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';

import { LandingComponent } from './landing.component';
import { PortfolioComponent } from './portfolio.component';

@Component({
    selector: 'portfolio-app',
    templateUrl: '/app/views/template.html',
    styleUrls: ['../app/styles/template.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
    { path: '/landing', name: 'Landing', component: LandingComponent, useAsDefault: true },
    { path: '/portfolio', name: 'Portfolio', component: PortfolioComponent }
])

export class AppComponent { }

现在，从服务器请求了.css文件，当我检查页面源代码时，可以看到它已添加到头部。但是发生了一些奇怪的事情：

<style>@media (min-width: 768px) {


    .outer[_ngcontent-mav-3] {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .mainContainer[_ngcontent-mav-3] {
        display: table-cell;
        vertical-align: middle;
    }
    .appContainer[_ngcontent-mav-3] {
        width: 95%;
        border-radius: 50%;
    }
    .heightElement[_ngcontent-mav-3] {
        height: 0;
        padding-bottom: 100%;
    }
}</style>

从此文件生成：

/* Small devices (tablets, 768px and up) */

@media (min-width: 768px) {
    /* center the mainContainer */

    .outer {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .mainContainer {
        display: table-cell;
        vertical-align: middle;
    }
    .appContainer {
        width: 95%;
        border-radius: 50%;
    }
    .heightElement {
        height: 0;
        padding-bottom: 100%;
    }
}

有人可以解释_ngcontent-mav标记的来源，代表什么以及如何摆脱它吗？

我认为这就是为什么我的样式未应用到模板的原因。

如果您需要有关应用程序结构的更多信息，请签出我的gitRepo，或询问，然后将代码添加到问题中。

谢谢您的帮助。

Answer 1

更新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, /* same as */
* /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上的此演示文稿