View Encapsulation управляет тем, как CSS компонента имеет область видимости — по умолчанию Angular изолирует стили каждого компонента, чтобы они не просочились в другие компоненты и не были ими затронуты. Это решает проблему глобальной области видимости CSS.
({
: ,
: ,
: [],
})
{}
В режиме по умолчанию Emulated этот h2 { color: blue } не повлияет на <h2> в других компонентах, и внешние стили не будут просачиваться в этот.
<!-- 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 автоматически добавляет уникальные атрибуты _ngcontent/_nghost к элементам компонента и переписывает её селекторы CSS, чтобы они совпадали только с ними — эмулируя стили в области видимости без необходимости в собственном Shadow DOM.
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 стилизирует собственный корневой элемент компонента; ::ng-deep применяет стиль к потомкам (мощно, но не рекомендуется — нарушает инкапсуляцию).
View Encapsulation — это причина, по которой компоненты Angular безопасны для стилизации изолированно — вы можете написать h2 { color: blue } в одном компоненте, не беспокоясь о том, что испортите каждый <h2> в приложении.
Понимание режима по умолчанию Emulated (и альтернатив None/ShadowDom, а также :host и ::ng-deep для намеренных исключений) важно для управления стилями в больших приложениях и для создания библиотек компонентов, где утечка стилей была бы серьёзной проблемой.