Стили и шаблоны компонента
Инкапсуляция представления
CSS стили компонента инкапсулируются в представление компонента и не влияют на остальную часть приложения.
Чтобы управлять тем, как эта инкапсуляция выполняется для каждого компонента, вы можете установить режим инкапсуляции в метаданных компонента с помощью параметра encapsulation.
Выберите один из следующих режимов:
Native- Инкапсуляция представления использует встроенную shadow DOM реализацию браузера для прикрепления shadow DOM к хост элементу компонента, а затем помещает представление компонента внутри этого shadow DOM. Стили компонента включены в shadow DOM.Emulated- значение по дефолту. Инкапсуляция представления эмулирует поведение shadow DOM путем предварительной обработки (и переименования) кода CSS, чтобы эффективно охватить CSS для представления компонента.None- Означает, что Angular не инкапсулирует представление. Angular добавляет CSS к глобальным стилям. Правила определения, изоляции и защиты, о которых говорилось выше, не применяются. Это по существу то же самое, что вставить стили компонента в HTML-код.
Чтобы установить режим инкапсуляции компонентов, используйте свойство инкапсуляции в метаданных компонента
encapsulation: ViewEncapsulation.Native
Native инкапсуляция работает только в браузерах, имеющих встроенную поддержку shadow DOM (На данным момент только Chrome). Так как поддержка ограничена, поэтому Emulated view encapsulation является режимом по умолчанию и рекомендуется в большинстве случаев.
Примерencapsulation: ViewEncapsulation.Emulated:
<body>
<div class="test">Test!</div>
<my-app _nghost-cmy-1="">
<div _ngcontent-cmy-1="" class="test">
<div _ngcontent-cmy-1="">
Title: Hello!
</div>
<input _ngcontent-cmy-1="" type="text" class="ng-untouched ng-pristine ng-valid">
</div>
</my-app>
</body>
.test[_ngcontent-cmy-1] {
padding: 10px;
}
.test {
background: green;
}
Существует два типа генерируемых атрибутов:
- Элемент, который будет shadow DOM хостом, имеет сгенерированный атрибут
_nghost. - Элемент в представлении компонента имеет атрибут
_ngcontent, который идентифицирует, к какому эмулированному shadow DOM хосту принадлежит этот элемент.