Earlier, we saw that there are three ways of defining styles specific to components (styles encapsulated in the component template scope). A component's CSS doesn't even affect the components it owns.
Angular 2 doesn't use shadow DOM by default; instead, it uses a different technique to achieve style encapsulation. This is due to the lack of browser support.
By default, Angular 2 modifies the CSS selector in such a way that it only targets the elements in the component, and it then places the CSS in the <head> tag of the page. If you inspect our current app using browser developer tools, you will see this:
Here, you can see that the CSS has been modified and inserted into the <head> tag.
To force Angular 2 to use shadow DOM, we need to assign the encapsulation property of the component configuration object to ng.core.ViewEncapsulation.Native. By default, it's assigned to ng.core.ViewEncapsulation.Emulated.