In Angular, component CSS styles are encapsulated into the component's view and don't\naffect the rest of the application.
\nTo control how this encapsulation happens on a per\ncomponent basis, you can set the view encapsulation mode in the component metadata.\nChoose from the following modes:
\nShadowDom view encapsulation uses the browser's native shadow DOM implementation (see\nShadow DOM\non the MDN site)\nto attach a shadow DOM to the component's host element, and then puts the component\nview inside that shadow DOM. The component's styles are included within the shadow DOM.
Emulated view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing\n(and renaming) the CSS code to effectively scope the CSS to the component's view.\nFor details, see Inspecting generated CSS below.
None means that Angular does no view encapsulation.\nAngular adds the CSS to the global styles.\nThe scoping rules, isolations, and protections discussed earlier don't apply.\nThis is essentially the same as pasting the component's styles into the HTML.
To set the component's encapsulation mode, use the encapsulation property in the component metadata:
ShadowDom view encapsulation only works on browsers that have native support\nfor shadow DOM (see Shadow DOM v1 on the\nCan I use site). The support is still limited,\nwhich is why Emulated view encapsulation is the default mode and recommended\nin most cases.
When using emulated view encapsulation, Angular preprocesses\nall component styles so that they approximate the standard shadow CSS scoping rules.
\nIn the DOM of a running Angular application with emulated view\nencapsulation enabled, each DOM element has some extra attributes\nattached to it:
\nThere are two kinds of generated attributes:
\n_nghost attribute. This is typically the case for component host elements._ngcontent attribute\nthat identifies to which host's emulated shadow DOM this element belongs.The exact values of these attributes aren't important. They are automatically\ngenerated and you should never refer to them in application code. But they are targeted\nby the generated component styles, which are in the <head> section of the DOM:
These styles are post-processed so that each selector is augmented\nwith _nghost or _ngcontent attribute selectors.\nThese extra selectors enable the scoping rules described in this page.