Angular2 - adding [_ngcontent-mav-x] to styles
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
You should try this,
import {ViewEncapsulation} from 'angular2/core';
@Component({
...
encapsulation: ViewEncapsulation.None,
...
})