View Encapsulation mengontrol bagaimana CSS komponen di-scope — secara default, Angular mengisolasi gaya setiap komponen sehingga tidak bocor ke komponen lain atau terpengaruh oleh komponen lain. Ini menyelesaikan masalah cakupan global CSS.
({
: ,
: ,
: [],
})
{}
Dengan mode Emulated default, h2 { color: blue } itu tidak akan mempengaruhi <h2> di komponen lain, dan gaya eksternal tidak akan bocor ke dalam yang 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 otomatis menambahkan atribut unik _ngcontent/_nghost ke elemen komponen dan menulis ulang pemilih CSS-nya agar hanya cocok dengan mereka — meniru gaya berlingkup 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 menggaya elemen root komponen sendiri; ::ng-deep memaksa gaya melewati keturunan (kuat tetapi tidak disarankan — memecah enkapsulasi).
View Encapsulation adalah alasan mengapa komponen Angular aman untuk ditata gaya secara terisolasi — Anda dapat menulis h2 { color: blue } dalam satu komponen tanpa khawatir tentang menghancurkan setiap <h2> di aplikasi.
Memahami mode Emulated default (dan alternatif None/ShadowDom, ditambah :host dan ::ng-deep untuk pengecualian yang disengaja) penting untuk mengelola gaya dalam aplikasi besar dan untuk membangun perpustakaan komponen di mana kebocoran gaya akan menjadi masalah serius.
Perpustakaan pertanyaan wawancara IT dengan jawaban mendetail — dari Junior hingga Senior.
Donasi