View Encapsulation kontroluje, jak CSS komponentu jest ograniczony (scoped) — domyślnie Angular izoluje style każdego komponentu, aby nie wyciekały do innych komponentów i nie były przez nich dotknięte. Rozwiązuje to problem globalnego zakresu CSS.
({
: ,
: ,
: [],
})
{}
W domyślnym trybie Emulated to h2 { color: blue } nie będzie wpływać na <h2> w innych komponentach, a style z zewnątrz nie będą się do niego przedostawać.
<!-- Angular adds unique attributes to scope the styles -->
<app-card _nghost-abc>
<h2 _ngcontent-abc>Title</h2>
</app-card>
<style>h2[_ngcontent-abc] { color: blue; }</style> <!-- scoped by attribute -->
Angular automatycznie dodaje unikalne atrybuty _ngcontent/_nghost do elementów komponentu i przepisuje jego selektory CSS, aby pasowały tylko do nich — emulując style o ograniczonym zasięgu bez potrzeby natywnego Shadow DOM.
ViewEncapsulation.Emulated (default) → scoped via added attributes (works everywhere)
ViewEncapsulation.ShadowDom → real browser Shadow DOM (true isolation)
ViewEncapsulation.None → NO scoping — styles are global (leak everywhere)
/* style a child component's internals from the parent */
:host { display: block; } /* the component's own host element */
:host(.active) { ... } /* host with a class */
::ng-deep .child-class { color: red; } /* pierce into children (use sparingly — deprecated-ish) */
:host stylizuje własny element root komponentu; ::ng-deep wymusza style na potomkach (potężne, ale odradzane — łamie encapsulation).
View Encapsulation sprawia, że komponenty Angular są bezpieczne do stylizacji w izolacji — możesz napisać h2 { color: blue } w jednym komponencie bez obawy, że zmontujesz każde <h2> w aplikacji.
Zrozumienie domyślnego trybu Emulated (i alternatyw None/ShadowDom, plus :host i ::ng-deep dla celowych wyjątków) jest ważne dla zarządzania stylami w dużych aplikacjach i budowania bibliotek komponentów, gdzie wyciek stylów byłby poważnym problemem.