Last Updated: June 23, 2016
· hdennison

ShadowDOM on Angular 2

At app level we should use: ViewEncapsulation.None because we don’t need to inherit (we are at root level)

At component level, just use: ViewEncapsulation.Emulated (which is the default setting)

This Will create extra attribute to DOM elem. So h1 becames h1[_ngcontent-bub-3].
Given that, h1 selector specificity rises from 1 to 11, and .class rises from 10 to 20 (so it’s always easy to overwrite inherited selectors, but can lead to headaches if unexpected behavior)

ViewEncapsulation.Native just crashes Safari (maybe missing polyfill?) Pending to proper testing

If we want to use ViewEncapsulation.Native, we should be aware that selectors like html body h1 { … } does not work anymore, because DOM is changed.