🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Функция находится в статусе ограниченной доступности в Baseline.

: host-context () — это CSS-псевдокласс, который позволяет применять стили к элементу внутри Shadow DOM, если его контейнер или предки соответствуют определённому селектору. Он помогает управлять внешним видом компонентов в зависимости от окружающей среды, не трогая их внутреннюю структуру.

Например, чтобы изменить стиль <div> внутри компонента, когда он находится внутри элемента с классом .theme-dark:

:host-context(.theme-dark) {
  background-color: #222;
  color: #fff;
}

Этот код скажет: если компонент находится внутри .theme-dark, его фон станет тёмным, а текст — светлым. Это очень удобно для адаптации компонентов к внешней обёртке, например, при смене темы.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.