View Encapsulation kontroluje, jak je CSS komponenty ohraničen — ve výchozím nastavení Angular izoluje styly každé komponenty tak, aby se nevylévaly do jiných komponent nebo je neovlivňovaly. To řeší problém globálního rozsahu CSS.
({
: ,
: ,
: [],
})
{}
V režimu Emulated se výchozí h2 { color: blue } nebude dotýkat <h2> v jiných komponentách a vnější styly se do tohoto nebudou prosákávat.
<!-- 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 automaticky přidává jedinečné atributy _ngcontent/_nghost k prvkům komponenty a přepisuje její CSS selektory tak, aby odpovídaly pouze těmto — emuluje ohraničené styly bez potřeby nativního 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 vlastní kořenový prvek komponenty; ::ng-deep vynucuje styl k potomkům (výkonné, ale nedoporučeno — porušuje encapsulation).
View Encapsulation je důvod, proč jsou komponenty Angular bezpečné na stylizování v izolaci — můžete psát h2 { color: blue } v jedné komponentě, aniž byste se museli obávat zničení každé <h2> v aplikaci.
Rozvržení výchozího režimu Emulated (a alternativ None/ShadowDom plus :host a ::ng-deep pro záměrné výjimky) je důležité pro správu stylů ve velkých aplikacích a pro vytváření knihoven komponent, kde by úniky stylů byly vážným problémem.