css - Angular2 - adding [_ngcontent-mav-x] to styles

Question

I'm setting up a basic angular app, and I'm trying to inject some css to my views. This is an example of one of my components:

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 { }

Now the .css file is requested from my server, and when I inspect the page source, I can see it was added to the head. But something weird is happening:

<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>

gets generated from this file:

/* 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%;
    }
}

Can somebody please explain where the _ngcontent-mav tag comes from, what does it stand for and how to get rid of it?

I think this is the reason why my style is not getting applied to my templates.

If you need more info about the app structure, please checkout my gitRepo, or ask and I'll add the code to the question.

Thanks for the help.

Answer 1

update2

::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

update

/deep/ and >>> are deprecated. ::ng-deep replaces them. ::-deep is also marked deprecated in source and the docs, but this means that it will also be removed eventually.

I think it depends on what W3C comes up with for theming the shadow DOM (like https://tabatkins.github.io/specs/css-shadow-parts/)

It's basically a workaround until all browsers support that natively and ViewEncapsulation.Emulated can be removed entirely.

::ng-deep is also supported in SASS (or will be, depending on the SASS implementation)

original

View encapsulation helps to prevent styles bleeding into or out of components. The default encapsulation is ViewEncapsulation.Emulated where classes like _ngcontent-mav-x are added to component tags and also styles are rewritten to only apply to matching classes.

This emulates to some degree the default behavior of the shadow DOM.

You can disable this encapsulation adding encapsulation: ViewEncapsulation.None to the @Component() decorator.

Another way is the recently (re-)introduced shadow piercing CSS combinators >>>, /deep/, and ::shadow. These combinators were introduced for styling shadow DOM but are deprecated there. Angular introduce them recently until other mechanisms like CSS variables are implemented. See also https://github.com/angular/angular/pull/7563 (https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17)

>>> and /deep/ are equivalent and using this combinators makes the styles ignore the the added helper classes (_ngcontent-mav-x)

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

applies to all my-component tags not matter how deep they are nested in other components.

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

applies to all elements in the template of some-component, but not further descendants.

They can also be combined

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

this applies to all div elements in the template of all my-component templates no matter how deep my-component is nested in other components.

/deep/, >>>, and ::shadow can only be used with

• encapsulation: ViewEncapsulation.None
• encapsulation: ViewEncapsulation.Emulated
• encapsulation: ViewEncapsulation.Native when the browser supports them natively (Chrome does but prints a warning in the console that they are deprecated) or
  when the browser doesn't native support shadow DOM and the web_components polyfills are loaded.

For a simple example see also the Plunker from this question https://stackoverflow.com/a/36226061/217408

See also this presentation from ng-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0