Режимы инкапсуляции представления
Сравнивайте Emulated, None и ShadowDom.
«Режимы инкапсуляции представления» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Что такое инкапсуляция представления
Инкапсуляция представления определяет, как стили компонента изолируются от остальной части страницы. Angular предлагает три режима, задаваемые свойством encapsulation.
Настройка режима
Задайте режим с помощью перечисления ViewEncapsulation в декораторе @Component.
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-card",
encapsulation: ViewEncapsulation.Emulated
})
export class CardComponent {}Эмулируемый (по умолчанию)
Emulated используется по умолчанию. Angular имитирует стили с ограниченной областью действия, добавляя уникальные атрибуты к элементам и селекторам, не используя нативный Shadow DOM.
@Component({
encapsulation: ViewEncapsulation.Emulated
})Как работает эмулируемый режим
Эмулируемый режим переписывает селекторы с добавленными атрибутами, обеспечивая ограничение области действия во всех браузерах без требований поддержки Shadow DOM.
/* you write */
.title { color: blue; }
/* angular emits */
.title[_ngcontent-xyz] { color: blue; }Без инкапсуляции
None полностью отключает инкапсуляцию. Стили компонента становятся глобальными и могут влиять на любой элемент страницы.
@Component({
encapsulation: ViewEncapsulation.None,
styles: [".title { color: red; }"]
})
// .title now applies app-wideКогда использовать режим без инкапсуляции
Используйте None с осторожностью, например чтобы определить общие правила темы в одном компоненте. Помните, что стили могут конфликтовать глобально.
ShadowDom
ShadowDom использует нативный Shadow DOM браузера, чтобы полностью изолировать разметку и стили компонента.
@Component({
selector: "app-widget",
encapsulation: ViewEncapsulation.ShadowDom
})
export class WidgetComponent {}Чем отличается ShadowDom
В режиме ShadowDom компонент отображается внутри настоящего корня теневого DOM. Глобальные стили не проникают внутрь, а стили компонента не выходят наружу, обеспечивая наиболее сильную изоляцию.
Сравнение утечки стилей
Эмулируемый режим предотвращает утечку наружу, но глобальные стили по-прежнему могут воздействовать на элементы; режим None не обеспечивает изоляции; ShadowDom полностью блокирует стили в обоих направлениях.
Выбор режима
Почти всегда используйте Emulated. Выбирайте ShadowDom для полностью изолированных виджетов, а None — только для намеренно глобальных стилей.
Инкапсуляция и глобальные стили
Помните: глобальная таблица стилей styles.css применяется независимо от режима, за исключением содержимого компонента ShadowDom, куда глобальные стили не проникают.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли режимы инкапсуляции представления.
Итоги
Angular предлагает три режима инкапсуляции: Emulated (по умолчанию, имитация ограничения области действия), None (глобальные стили) и ShadowDom (нативная изоляция). Режим Emulated подходит для большинства случаев, а ShadowDom обеспечивает наиболее сильную изоляцию.
Часто задаваемые вопросы
Урок «Режимы инкапсуляции представления» бесплатный?
Да — полный текст урока «Режимы инкапсуляции представления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Режимы инкапсуляции представления»?
Сравнивайте Emulated, None и ShadowDom. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Режимы инкапсуляции представления»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Стили в области компонента
- Режимы инкапсуляции представления
- Стилизация host и host-context
- Динамические классы и стили