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

from pro-angular book:

The ViewEncapsulation Values:

• Emulated: When this value is specified, Angular emulates the Shadow DOM by writting content and styles to add atrributes.This is default behaviour if no encapsulation value is specified.

  If you inspect the DOM using the browser’s F12 developer tools, you will see that the contents of the external CSS file.

    ...
    
    ...

The selector has been modified so that it matches div elements with an attribute called _ngcontent-c0 although you may see a different name in your browser since the name of the attribute is generated dynamically by Angular.

To ensure that the CSS in the style element affects only the HTML elements managed by the component, the elements in the template are modified so they have the same dynamically generated attribute, like this:

...

   Name
   

...

• Native: When this value is specified, Angular uses the browser’s shadow DOM feature. This will work only if the browser implements the shadow DOM or if you are using a polyfill.
• None: When this value is specified, Angular simply adds the unmodified CSS styles to the head section of the HTML document and lets the browser figure out how to apply the styles using the normal CSS precedence rules.

The Native and None values should be used with caution. Browser support for the shadow DOM feature is so limited that using the Native option is sensible only if you are using a polyfill library that provides compatibility for other browsers.

The None option adds all the styles defined by components to the head section of the HTML document and lets the browser figure out how to apply them. This has the benefit of working in all browsers, but the results are unpredictable, and there is no isolation between the styles defined by different components.