View Encapsulation kiểm soát cách CSS của một component được scope — theo mặc định, Angular cô lập các style của mỗi component để chúng không lọt ra ngoài hay bị ảnh hưởng bởi các component khác. Điều này giải quyết vấn đề scope toàn cục của CSS.
({
: ,
: ,
: [],
})
{}
Với chế độ Emulated mặc định, h2 { color: blue } đó sẽ không ảnh hưởng tới các <h2> trong các component khác, và các style bên ngoài cũng không thấm vào cái này.
<!-- Angular thêm các thuộc tính độc nhất để scope các style -->
<app-card _nghost-abc>
<h2 _ngcontent-abc>Title</h2>
</app-card>
<style>h2[_ngcontent-abc] { color: blue; }</style> <!-- scope theo thuộc tính -->
Angular tự động thêm các thuộc tính _ngcontent/_nghost độc nhất vào các phần tử của component và viết lại các CSS selector của nó để chỉ khớp với chúng — mô phỏng style được scope mà không cần Shadow DOM gốc.
ViewEncapsulation.Emulated (mặc định) → scope qua các thuộc tính được thêm (hoạt động mọi nơi)
ViewEncapsulation.ShadowDom → Shadow DOM thật của trình duyệt (cô lập thật sự)
ViewEncapsulation.None → KHÔNG scope — style là toàn cục (lọt ra mọi nơi)
/* style phần bên trong của một component con từ cha */
:host { display: block; } /* phần tử host của chính component */
:host(.active) { ... } /* host có một class */
::ng-deep .child-class { color: red; } /* xuyên vào các con (dùng dè dặt — đang dần bị bỏ) */
:host style phần tử gốc của riêng component; ::ng-deep buộc một style xuyên tới các phần tử con (mạnh mẽ nhưng không được khuyến khích — nó phá vỡ encapsulation).
View Encapsulation là vì sao các component Angular an toàn để style trong cô lập — bạn có thể viết h2 { color: blue } trong một component mà không lo đè bẹp mọi <h2> trong ứng dụng.
Hiểu chế độ Emulated mặc định (và các lựa chọn None/ShadowDom, cùng :host và ::ng-deep cho các ngoại lệ có chủ ý) là quan trọng để quản lý style trong các ứng dụng lớn và để xây dựng các thư viện component nơi việc rò rỉ style sẽ là một vấn đề nghiêm trọng.