Angular - 5.9-Understanding the encapsulation of views

The latest videos of our application under development have shown a change when servers or blueprints were added. Specifically, a new server at the bottom of the blueprint and the paragraph at the top no longer had a blue color. Before, they were colored in blue because we had defined in the file app.component.css that paragraphs had to have a blue text color.

However, both paragraphs have been moved and are no longer part of our app.component. The first paragraph is part of the cockpit and the second paragraph is inside our server element. However, in this CSS definition, we simply put "paragraph", so this should affect all paragraphs of our application.

The reason for this behavior is due to Angular, which imposes this style encapsulation. Although these CSS files are meant to encapsulate styles for the component they belong to, this is not a default behavior. Angular adds strange attributes to each element of a component, such as _ngcontent-ejo-2, to ensure that the styles we define in a CSS file only apply to the component they belong to.

Angular emulates shadow DOM, which is a technology not supported by all browsers, where each element has its own shadow DOM behind it where you could then assign styles to each element. The default behavior of view encapsulation in Angular is thus.