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.
Written by Harold Dennison
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Angular2
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#