Styling components and shadow DOM

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:

Styling components and shadow DOM

Here, you ...

Get JavaScript: Moving to ES2015 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.