angular viewencapsulation shadow dom vs emulated vs none code example

Example: Diff between ViewEncapsulation.Native, ViewEncapsulation.None and ViewEncapsulation.Emulated

If you want styles that are added to Parent applied to Child you need to set ViewEncapsulation.None in the Child component so it doesn't prevent styles to bleed in.

Emulated and Native are just two different ways to prevent styles to bleed in to and out from components. None is the only one that allows styles to cross component boundaries.

original

ViewEncapsulation.None is simple no encapsulation

ViewEncapsulation.Emulated (currently the default in Angular2)
adds attributes to component tags and child elements and manipulates the CSS (adding the attributes to the selectors) added to the page so the styles don't bleed into each other - to keep styles scoped to the components where they are added even though the styles are all added collected in the head of the page when components are loaded.

ViewEncapsulation.Native creates custom elements with shadow DOM where the browsers native implementation ensures the style scoping.
If the browser doesn't support shadow DOM natively, the web-components polyfills are required to shim the behavior. This is similar to ViewEncapsulation.Emulated but the polyfills are more expensive because they polyfill lots of browser APIs even when most of them are never used. Angulars Emulated emulation just adds the cost for what it uses and is therefore much more efficient for Angular applications.