View Encapsulation mengawal bagaimana CSS komponen diskalakan — secara lalai, Angular mengasingkan gaya setiap komponen supaya ia tidak bocor ke komponen lain atau dipengaruhi oleh komponen lain. Ini menyelesaikan masalah skop global CSS.
({
: ,
: ,
: [],
})
{}
Dengan mod Emulated lalai, h2 { color: blue } itu tidak akan menjejaskan <h2> di komponen lain, dan gaya luar tidak akan meresap ke komponen ini.
<!-- 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 secara automatik menambahkan atribut _ngcontent/_nghost yang unik kepada elemen komponen dan menulis semula pemilih CSS untuk sepadan hanya dengan mereka — meniru gaya berskop tanpa memerlukan Shadow DOM asli.
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 menggayakan elemen root komponen itu sendiri; ::ng-deep memaksa gaya melalui kepada keturunan (berkuasa tetapi tidak disyorkan — ia memecahkan encapsulation).
View Encapsulation ialah sebab mengapa komponen Angular selamat untuk digayakan secara terasing — anda boleh menulis h2 { color: blue } dalam satu komponen tanpa bimbang tentang memusnahkan setiap <h2> dalam apl.
Memahami mod Emulated lalai (dan alternatif None/ShadowDom, tambah :host dan ::ng-deep untuk pengecualian yang disengajakan) adalah penting untuk menguruskan gaya dalam apl besar dan untuk membina perpustakaan komponen di mana kebocoran gaya akan menjadi masalah serius.