Стилизация host и host-context
Стилизуйте элемент-хост компонента.
«Стилизация host и host-context» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Стилизация хост-элемента
Компонент отображается внутри собственного хост-элемента (тега его селектора). Специальный псевдокласс :host позволяет стилизовать этот элемент из CSS компонента.
Селектор :host
Используйте :host, чтобы обратиться к собственному элементу компонента, например задать ему отображение и отступы.
/* card.component.css */
:host {
display: block;
padding: 16px;
}Зачем нужен :host
Без :host нельзя стилизовать хост-элемент изнутри компонента, поскольку селекторы с ограниченной областью действия соответствуют только элементам внутри шаблона.
:host с условием
В :host() можно передать селектор, чтобы стилизовать хост только при его соответствии этому селектору, например при наличии класса.
:host(.active) {
border: 2px solid green;
}
<!-- applies when host has class active -->
<app-card class="active"></app-card>Привязка класса хоста
Сочетайте :host() с привязкой класса хоста, чтобы стилизовать компонент в зависимости от его собственного состояния.
@Component({
selector: "app-card",
host: { "[class.selected]": "isSelected" },
styleUrl: "./card.component.css"
})
export class CardComponent {
isSelected = true;
}Селектор :host-context
:host-context() стилизует компонент на основе условия, заданного для любого предка, а не для самого хоста. Этот селектор особенно удобен для темизации.
:host-context(.dark-theme) {
background: #222;
color: #eee;
}Пример темизации
Если у родительского элемента выше по дереву есть класс dark-theme, правило применяется, позволяя одному предку изменить внешний вид вложенных компонентов.
<body class="dark-theme">
<app-card></app-card>
<!-- card uses dark styles -->
</body>:host и :host-context
:host проверяет собственный элемент компонента, а :host-context — предков. Используйте host для собственного состояния, а host-context — для унаследованного контекста, например темы.
Сочетание с потомками
Можно объединять :host-context с селекторами потомков, чтобы стилизовать внутренние элементы на основе контекста предка.
:host-context(.compact) .title {
font-size: 12px;
}Отображение хоста по умолчанию
Хосты пользовательских элементов по умолчанию являются строчными. Установка display: block для :host — распространённое первое правило, благодаря которому макет ведёт себя предсказуемо.
:host {
display: block;
}Практическое применение
Используйте стилизацию хоста, чтобы управлять внешней областью компонента, реагировать на его собственное состояние и адаптироваться к классам окружающей темы, сохраняя стили изолированными и гибкими.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли стилизацию хоста.
Итоги
Используйте :host, чтобы стилизовать собственный элемент и состояние компонента, а :host-context() — чтобы реагировать на классы предков при темизации. Установка display: block для хоста — полезное значение по умолчанию.
Часто задаваемые вопросы
Урок «Стилизация host и host-context» бесплатный?
Да — полный текст урока «Стилизация host и host-context» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Стилизация host и host-context»?
Стилизуйте элемент-хост компонента. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Стилизация host и host-context»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Стили в области компонента
- Режимы инкапсуляции представления
- Стилизация host и host-context
- Динамические классы и стили