Angular 2's Fresh Approach to Style - Justin Schwartzenberger

By: ng-conf

116   8   28243

Uploaded on 05/04/2016

ng-conf is a two day, single track conference focused on delivering the highest quality training in the Angular JavaScript framework. 500 to 700 Developers from across the country will converge on beautiful Salt Lake City, UT to participate in training sessions by the Google Angular team, and other Angular experts. In addition to the invaluable training, ng-conf will deliver a premier conference experience for attendees, providing opportunities to network with other developers, relax at social events, and engage in some of the unique entertainment opportunities available in Utah.

Comments (3):

By anonymous    2017-09-20


/deep/ and >>> are deprecated. ::ng-deep replaces them. ::-deep is also marked deprecated in source and the docs, but this means that it will be eventually but it's not clear what will replace it. I guess it depends on what W3C comes up with for theming the shadow DOM (like

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


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 (

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

See also this presentation from ng-conf 2016

Original Thread

By anonymous    2018-01-07

@HJEMAI a good explanation of :host and :host-context

Original Thread

Submit Your Video

If you have some great dev videos to share, please fill out this form.