How to understand style encapsulation?

Question

Angular

Please help me write a case study so that you can see the effect and benefits of style encapsulation. My version is here . Here the problem is that it is not clear what action the metaargument performs. encapsulation: ViewEncapsulation.None,

There is a root element and there is a nested element. In each of them, I turned off encapsulation, but as a result, the styles from the first are applied to both. Where is the logic?

Couldn't the benefits of using ViewEncapsulation be more clearly shown in the case of nested elements?

Answer 1

Please help me write a case study so that you can see the effect and benefits of style encapsulation. My version is here .

"Help"? Yes, you did it yourself. Only for some reason they themselves broke everything.
This is to disable component style encapsulation.
It seems that you forgot that the background is commented out in the child component's styles - that's why the style from the parent component is applied. Remove the comment and both elements will be styled according to the rule from the child component.
Even better, stop turning off encapsulation as well, and then elements from different components will be styled differently, despite the fact that the class name is the same. Actually, this is what you put it there? - "benefit of encapsulation" - you can define your own style rules in each of the components, without worrying that they will intersect with the styles of other components.