Стилизация компонентов

Компоненты могут включать CSS-стили, применяемые к DOM этого компонента:

@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
  styles: `
    img {
      border-radius: 50%;
    }
  `,
})
export class ProfilePhoto {}

Вы также можете разместить стили в отдельных файлах:

@Component({
  selector: 'profile-photo',
  templateUrl: 'profile-photo.html',
  styleUrl: 'profile-photo.css',
})
export class ProfilePhoto {}

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

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

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

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

@Component({
  ...,
  encapsulation: ViewEncapsulation.None,
})
export class ProfilePhoto { }

ViewEncapsulation.Emulated

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

Этот режим не позволяет стилям компонента выходить за его пределы и влиять на другие компоненты. Однако глобальные стили, заданные вне компонента, всё ещё могут влиять на элементы внутри компонента с эмулируемой инкапсуляцией.

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

::ng-deep

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

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

Например:

• Селектор CSS-правила вроде 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

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

Определение стилей в шаблонах

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

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

Подключение внешних файлов стилей

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