Angular2 - добавление [_ngcontent-mav-x] в стили

Я настраиваю базовое приложение angular, и я пытаюсь ввести некоторые 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 или спросите, и я добавлю код на вопрос.

Спасибо за помощь.

Ответ 1

Обновление

/deep/ и >>> устарели. ::ng-deep заменяет их. ::-deep также отмечен устаревшим в источнике и документах, но это означает, что это будет в конечном итоге, но не ясно, что его заменит. Я думаю, это зависит от того, что W3C подходит для того, чтобы использовать теневую DOM (например, https://tabatkins.github.io/specs/css-shadow-parts/)

::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;
}

это относится ко всем элементам div в шаблоне всех шаблонов my-component, независимо от того, насколько глубокий my-component вложен в другие компоненты.

/deep/, >>> и ::shadow могут использоваться только с

encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.Emulated
encapsulation: ViewEncapsulation.Native, когда браузер поддерживает их изначально (Chrome делает, но печатает предупреждение в консоли, которое они устарели) или
когда браузер не поддерживает встроенную поддержку DOM и Загружаются полисы заполнения web_components.

Для простого примера см. также Plunker из этого вопроса fooobar.com/questions/252128/...

См. также эту презентацию от ng-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0

Ответ 1

Ответ 2