Angular - 5.10-Learn more about encapsulation of views

In the last video, you learned how Angular encapsulates your styles. Now you can skip this encapsulation. If you return to your code for the server element component, you can add something to the ad component decorator. This is called encapsulation of this property.

As a value, you can access a view encapsulation that needs to be imported from @angular/core. Be sure to add this import, then you can choose between the following modes: "none" (none), "emulate" (emulate) which is the default, and "native" (native).

If you use "none", this will ensure that if we look at our component again and inspect server element, you won’t see these strange attributes added to your elements. Therefore, this component no longer uses view encapsulation. Other components will continue to use it. You will still see these attributes, but if you define styles for this component in the CSS file of that component, they will be applied globally. And I can prove it by going into this CSS file. And if I change the color of the label, which is in the cockpit and not in this component, to red, you will see that the label is overwritten.

Although this label still has its unique custom attribute, it is still a label in the end. And in this component of the server element, we disable encapsulation. Thus, our selectors are not modified by Angular. They do not receive their single selector, so they are applied; they are used throughout the application, which also affects other components. This may be the behavior you want, there is a good chance that this is not the case but it is important to know that you can change this behavior.

In addition to None, you can also choose the native mode that uses shadowDom technology. This should give you the same result as with "emulate", but only in browsers that support it. This is why, in most cases, it is better to choose "emulate". With this, your label should no longer be red.

So this is how you can change it and how you encapsulate views. A nice tool to make sure that, by default, only your component receives the styles you have defined for it. But as you have learned, it can be overwritten.