Перейти к содержанию

Стили компонентов

📅 30.09.2026

Этот материал предполагает, что вы уже прочитали руководство по основам. Если Angular для вас в новинку, начните с него.

Компонент может дополнительно задать CSS-стили, которые применяются к его DOM:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
  styles: `
    img {
      border-radius: 50%;
    }
  `,
})
export class ProfilePhoto {}

Стили можно вынести в отдельные файлы:

1
2
3
4
5
6
@Component({
  selector: 'profile-photo',
  templateUrl: 'profile-photo.html',
  styleUrl: 'profile-photo.css',
})
export class ProfilePhoto {}

При компиляции компонента эти стили попадают в его JavaScript. Стили компонента участвуют в системе модулей JavaScript. Когда компонент отрисовывается, фреймворк сам подключает связанные стили, в том числе при ленивой загрузке компонента.

Angular работает с любым инструментом, который выдаёт CSS, в том числе Sass, Less и Stylus.

Область действия стилей

У каждого компонента есть настройка инкапсуляции представления. Она определяет, как фреймворк ограничивает область действия стилей. Режимов четыре: Emulated, ShadowDom, ExperimentalIsolatedShadowDom и None. Режим задают в декораторе @Component:

1
2
3
4
5
@Component({
  ...,
  encapsulation: ViewEncapsulation.None,
})
export class ProfilePhoto { }

ViewEncapsulation.Emulated

По умолчанию Angular использует эмулированную инкапсуляцию: стили компонента применяются только к элементам его шаблона. В этом режиме фреймворк создаёт уникальный HTML-атрибут для каждого экземпляра компонента, добавляет его к элементам шаблона и подставляет в CSS-селекторы из стилей компонента.

Стили компонента не протекают наружу и не задевают другие компоненты. Глобальные стили, заданные вне компонента, по-прежнему могут затронуть элементы внутри компонента с эмулированной инкапсуляцией.

В эмулированном режиме Angular поддерживает псевдокласс :host. Псевдокласс :host-context() в современных браузерах устарел, но компилятор Angular поддерживает его полностью. Оба псевдокласса работают без нативного Shadow DOM. При компиляции фреймворк превращает эти псевдоклассы в атрибуты, поэтому во время выполнения на них не действуют правила нативных псевдоклассов (совместимость браузеров, специфичность). Другие псевдоклассы, связанные с Shadow DOM, например ::shadow и ::part, эмулированная инкапсуляция не поддерживает.

::ng-deep

Эмулированная инкапсуляция поддерживает собственный псевдокласс ::ng-deep. Команда Angular настоятельно не рекомендует ::ng-deep в новом коде. Эти API оставлены только для обратной совместимости.

Если селектор содержит ::ng-deep, после этой точки Angular перестаёт проводить границу инкапсуляции представления. Часть селектора после ::ng-deep может совпасть с элементами вне шаблона компонента.

Например:

  • Селектор вроде p a при эмулированной инкапсуляции совпадёт с элементами <a>, которые являются потомками элемента <p>, и оба элемента находятся в собственном шаблоне компонента.

  • Селектор ::ng-deep p a совпадёт с элементами <a> в любом месте приложения, если они являются потомками элемента <p> в любом месте приложения.

    По сути такое правило ведёт себя как глобальный стиль.

  • В селекторе p ::ng-deep a Angular требует, чтобы элемент <p> был из собственного шаблона компонента, а элемент <a> может находиться где угодно в приложении.

    То есть <a> может быть в шаблоне компонента или в любом проецируемом и дочернем содержимом.

  • При :host ::ng-deep p a и <a>, и <p> должны быть потомками элемента-хоста компонента.

    Они могут прийти из шаблона компонента или из представлений дочерних компонентов, но не из других мест приложения.

ViewEncapsulation.ShadowDom

В этом режиме область действия стилей задаёт стандартный API Shadow DOM. Если режим включён, Angular прикрепляет к элементу-хосту теневой корень и отрисовывает шаблон и стили компонента в соответствующее теневое дерево.

Стили внутри теневого дерева не затрагивают элементы снаружи него.

Инкапсуляция ShadowDom меняет не только область действия стилей. Отрисовка компонента в теневом дереве влияет на распространение событий, на работу с API <slot> и на то, как элементы показывает панель разработчика браузера. Прежде чем включать этот режим, разберитесь, что Shadow DOM изменит в приложении.

ViewEncapsulation.ExperimentalIsolatedShadowDom

Ведёт себя так же, но строго гарантирует, что к элементам шаблона применяются только стили этого компонента. Глобальные стили не затрагивают элементы теневого дерева, а стили внутри теневого дерева не затрагивают элементы снаружи.

ViewEncapsulation.None

Режим отключает инкапсуляцию стилей компонента. Все связанные с ним стили ведут себя как глобальные.

В режимах Emulated и ShadowDom Angular не гарантирует, что стили компонента всегда перекроют стили снаружи. При конфликте считается, что внешние стили имеют ту же специфичность, что и стили компонента.

Стили прямо в шаблоне

Дополнительные стили можно задать элементом <style> в шаблоне компонента. К ним применяется тот же режим инкапсуляции представления.

Привязки внутри элементов style Angular не поддерживает.

Ссылки на внешние файлы стилей

Шаблон компонента может ссылаться на CSS-файлы через элемент <link>. В самом CSS на файлы ссылается правило @import. Angular считает такие ссылки внешними стилями. Эмулированная инкапсуляция представления на внешние стили не действует.

Источник: https://angular.dev/guide/components/styling

Комментарии