View Encapsulation ngontrol carane CSS komponent dikuwatake — kanthi standar, Angular ngisola gaya saben komponent supaya ora nglolosi menyang komponent liyane utawa ora kena pengaruh dening komponent liyane. Iki ngatasi masalah ruang lingkup global CSS.
({
: ,
: ,
: [],
})
{}
Karo mode Emulated standar, h2 { color: blue } kuwi ora bakal nagaruhi <h2> ing komponent liyane, lan gaya njaba ora bakal mlebu menyang iki.
<!-- 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 sacara otomatis nambahake atribut _ngcontent/_nghost sing unik menyang elemen komponent lan nulis ulang selector CSS supaya cocog mung marang iku — nairu gaya sing dikuwatake tanpa kudu nggunakake 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 ngagayani elemen root komponent dhewe; ::ng-deep pakso gaya ngliwat menyang keturunan (kuwat nanging ora disaranke — mecah encapsulation).
View Encapsulation iku alasan komponent Angular aman kanggo gaya kanthi terpencil — sampeyan bisa nulis h2 { color: blue } ing siji komponent tanpa kuwatir babagan ngrusak saben <h2> ing app.
Memahami mode Emulated standar (lan alternatif None/ShadowDom, ditambah :host lan ::ng-deep kanggo pengecualian niat) penting kanggo ngatur gaya ing app gedhe lan kanggo mbangun perpustakaan komponent ing ngendi bocor gaya bakal dadi masalah serius.