From the course: Angular Essential Training (2019)

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

How Angular scopes styles to components

How Angular scopes styles to components - Angular Tutorial

From the course: Angular Essential Training (2019)

Start my 1-month free trial

How Angular scopes styles to components

- [Instructor] One of the major benefits of shadow Dom is the ability to scope CSS to a block of HTML meaning that the selectors will only apply to elements in that block. And the rules will not affect other elements in the document outside of that block. One of the drawbacks of shadow Dom is that it is not implemented in all browser vendors. The Angular framework fills that gap with its emulated view encapsulation mode, which is the default mode used when you don't specify a view in encapsulation configuration. In emulated mode, Angular is doing things with the CSS to encapsulate it to the component and its view contents. During the build, Angular run some pre-processing logic that will shim both the final CSS output and the template markup output to include some additional attributes that mimic the standard shadow CSS scoping rules. Let's take a look at how Angular handles the CSS we write for components after it does…

Contents