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:
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.