ViewEncapsulation — Angular

Определяет политики инкапсуляции стилей CSS для параметра encapsulation декоратора Component.

API

enum ViewEncapsulation {
  Emulated: ViewEncapsulation.Emulated;
  None: ViewEncapsulation.None;
  ShadowDom: ViewEncapsulation.ShadowDom;
  ExperimentalIsolatedShadowDom: ViewEncapsulation.ExperimentalIsolatedShadowDom;
}

Emulated

Имитирует поведение инкапсуляции нативного Shadow DOM, добавляя специальный атрибут к хост-элементу компонента и применяя тот же атрибут ко всем селекторам CSS, заданным через styles или styleUrls.

Это вариант по умолчанию.

None

Не обеспечивает никакой инкапсуляции стилей CSS. Это означает, что все стили, заданные через styles или styleUrls, применяются к любому HTML-элементу приложения независимо от компонента-хоста.

ShadowDom

Использует нативный API Shadow DOM браузера для инкапсуляции стилей CSS. Это означает, что для хост-элемента компонента создаётся ShadowRoot, который затем используется для инкапсуляции всех стилей компонента.

ExperimentalIsolatedShadowDom

@experimental

Аналогично ShadowDom, но не позволяет внешним стилям проникать в ShadowRoot компонента. Это полезно, когда нужно полностью изолировать стили компонента от остальной части приложения, включая глобальные стили.

Описание

Определяет политики инкапсуляции стилей CSS для параметра encapsulation декоратора Component.

См. encapsulation.