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

Question

Can some one explain what\'s the difference between ViewEncapsulation.Native, ViewEncapsulation.None and ViewEncapsulation.Emulated

Answer 1

• Native: Uses browser's native Shadow DOM. Check for browser support before enabling it.
• ShadowDom: Uses browser’s native Shadow DOM v1 for better cross-browser support and is a shared standard across the browsers. Check the difference between Shadow DOM v0 to v1.
• Emulated: Imitates behavior of Shadow DOM to scope the CSS for component and appends to the head.
• None: Neither Shadow DOM nor custom implementation, like global CSS which gets appended to the head

Angular uses ViewEncapsulation.Emulated as default encapsualtion mode.