View Encapsulation, bir bileşenin CSS'inin nasıl kapsüllenmesini kontrol eder — varsayılan olarak, Angular her bileşenin stillerini izole eder böylece diğer bileşenlere sızmazlar ve dış stiller tarafından etkilenmezler. Bu, CSS'nin global kapsam sorununu çözer.
({
: ,
: ,
: [],
})
{}
Varsayılan Emulated modu ile, o h2 { color: blue } diğer bileşenlerdeki <h2>'leri etkilemez ve dış stiller buna sızmaz.
<!-- 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, bileşenin öğelerine otomatik olarak benzersiz _ngcontent/_nghost nitelikleri ekler ve CSS seçicilerini bunlarla eşleşecek şekilde yeniden yazar — yerel Shadow DOM'a gerek kalmadan kapsüllü stilleri taklit eder.
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 bileşenin kendi kök öğesini şekillendirir; ::ng-deep bir stili torunlara zorla geçirir (güçlü ama önerilmez — encapsulation'ı kırılır).
View Encapsulation, Angular bileşenlerinin izolasyon halinde stillendirilmesi için güvenli olmasının nedenidir — bir bileşende h2 { color: blue } yazabilir ve uygulamadaki her <h2>'yi mahvetmekten endişe etmezsiniz.
Varsayılan Emulated modunu anlamak (ve None/ShadowDom alternatiflerini, ayrıca kasıtlı istisnalar için :host ve ::ng-deep'i) büyük uygulamalarda stilleri yönetmek ve stil sızıntısının ciddi bir sorun olacağı bileşen kütüphaneleri oluşturmak için önemlidir.