:host и :host-context

В Atomico, как и в стандартных веб-компонентах, псевдоклассы :host и :host-context предоставляют мощный инструмент для управления стилями на уровне компонента. Они позволяют определять стили, которые влияют на сам компонент или зависят от контекста, в котором компонент используется.

Псевдокласс :host

Псевдокласс :host применяется к корневому элементу компонента. В Atomico это особенно актуально, так как компонент оборачивается в Shadow DOM, и прямое воздействие на его внешний вид из внешнего CSS невозможно без :host.

Пример использования:

import { c, css } from "atomico";

function MyComponent() {
    return <host>Контент компонента</host>;
}

MyComponent.styles = css`
    :host {
        display: block;
        padding: 20px;
        background-color: #f0f0f0;
        border-radius: 8px;
    }

    :host([highlight]) {
        background-color: #ffe082;
    }
`;

customElements.define("my-component", c(MyComponent));

Ключевые моменты:

  • :host применяется только к корневому элементу компонента.
  • Поддерживает селекторы атрибутов: можно менять стили компонента в зависимости от его атрибутов.
  • Можно комбинировать с другими псевдоклассами: :host(:hover) позволяет создавать интерактивные эффекты при наведении на компонент.

Расширенные возможности:

:host(:hover) {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

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

Псевдокласс :host-context

:host-context позволяет изменять стили компонента в зависимости от его внешнего контекста. Это особенно полезно, когда нужно, чтобы компонент адаптировался к теме или окружению, в котором он используется.

Пример использования:

MyComponent.styles = css`
    :host-context(.dark-theme) {
        background-color: #333;
        color: #fff;
    }

    :host-context(.large-container) {
        font-size: 1.5rem;
    }
`;

Особенности:

  • :host-context проверяет родительские элементы компонента вне Shadow DOM.
  • Селектор может включать сложные CSS-селекторы, что позволяет компоненту «реагировать» на классы, идентификаторы или другие атрибуты контейнера.
  • Работает с комбинациями, например :host-context(.dark-theme) :host([highlight]), что дает возможность создавать условные стили на основе нескольких факторов.

Сравнение :host и :host-context

Особенность :host :host-context
Область действия Корневой элемент компонента Внешний контекст компонента (родительские элементы)
Селекторы атрибутов Да, позволяет менять стили по атрибутам Можно использовать в комбинации с :host для условного стиля
Поддержка интерактивности Да, псевдоклассы вроде :hover, :focus Применяется на основе контекста, интерактивность внутри контекста ограничена

Практические рекомендации

  • Использовать :host для базового оформления компонента и реакций на его собственные состояния.
  • Применять :host-context для адаптации компонента к темам, размерам контейнеров или другим внешним условиям.
  • Сочетать оба псевдокласса для гибкой стилизации: :host([state]) внутри :host-context(.theme) позволяет создавать полностью контекстно-зависимые стили.
  • Не перегружать компоненты сложными селекторами контекста: слишком длинные цепочки могут ухудшить читаемость кода и производительность рендеринга.

Продвинутое использование с переменными CSS

Atomico поддерживает CSS-переменные внутри Shadow DOM, что расширяет возможности :host и :host-context:

MyComponent.styles = css`
    :host {
        --bg-color: #f0f0f0;
        background-color: var(--bg-color);
    }

    :host-context(.dark-theme) {
        --bg-color: #222;
    }
`;

Такой подход позволяет централизованно управлять темами без необходимости дублирования стилей внутри компонента.

Итоговая структура применения

  1. Базовый стиль компонента: через :host.
  2. Стилизация по атрибутам: :host([attr]).
  3. Адаптация к внешнему окружению: :host-context.
  4. Интерактивные эффекты: сочетание псевдоклассов с :host.
  5. Темизация и CSS-переменные: интеграция с :host-context для гибкой настройки внешнего вида.

Такое разделение обеспечивает чистоту кода, масштабируемость и максимальную инкапсуляцию стилей в компонентах Atomico, сохраняя при этом гибкость и реактивность к внешним условиям.

Оглавление