Объявление стилей

В библиотеке FAST Element работа со стилями является ключевым аспектом создания визуально консистентных и повторно используемых компонентов. Стиль компонента определяется через класс css, который импортируется из пакета @microsoft/fast-element. Этот подход обеспечивает изоляцию стилей, поддержку темизации и динамическое применение CSS переменных.

Использование css для определения стилей

Стили для компонента объявляются с помощью функции css:

import { FASTElement, html, css } from "@microsoft/fast-element";

const buttonStyles = css`
    :host {
        display: inline-block;
        font-family: 'Segoe UI', sans-serif;
        font-size: 16px;
        line-height: 1.5;
    }

    button {
        background-color: var(--button-background, #0078d4);
        color: var(--button-foreground, white);
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    button:hover {
        background-color: var(--button-background-hover, #005a9e);
    }
`;

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

  • :host используется для стилизации самого компонента, а не внутренних элементов.
  • CSS-переменные (var(--имя-переменной)) позволяют переопределять стили при повторном использовании компонента или для поддержки тем.
  • Поддерживается стандартный CSS синтаксис с вложенностью, псевдоклассами и медиа-запросами.

Привязка стилей к компоненту

После объявления стилей их необходимо привязать к классу компонента через свойство styles:

class MyButton extends FASTElement {
    // Логика компонента
}

MyButton.styles = buttonStyles;

const template = html<MyButton>`
    <button><slot></slot></button>
`;

FASTElement.define({ name: "my-button", template, styles: buttonStyles });

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

  • Свойство styles может содержать один объект css или массив стилей для комбинирования.
  • FASTElement.define принимает стили напрямую через объект конфигурации, что упрощает регистрацию кастомного элемента.

Динамическая темизация через CSS-переменные

FAST Element активно использует CSS-переменные для поддержки динамической темизации:

:host {
    --button-background: #0078d4;
    --button-foreground: white;
    --button-background-hover: #005a9e;
}

Преимущество такого подхода заключается в возможности изменять внешний вид компонентов без пересоздания классов:

document.documentElement.style.setProperty('--button-background', '#ff6600');

Использование шаблонов стилей и повторное использование

Для крупных проектов целесообразно определять базовые стили, которые потом подключаются к различным компонентам:

export const baseButtonStyles = css`
    button {
        font-family: 'Segoe UI', sans-serif;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
`;

export const primaryButtonStyles = css`
    ${baseButtonStyles}

    button {
        background-color: var(--primary-bg, #0078d4);
        color: var(--primary-fg, white);
    }

    button:hover {
        background-color: var(--primary-bg-hover, #005a9e);
    }
`;

Использование интерполяции шаблонных литералов (${baseButtonStyles}) позволяет создавать модульные и повторно используемые наборы стилей.

Встроенные стили для внутренних элементов

Помимо стилизации :host, можно управлять стилями внутренних элементов через селекторы:

const cardStyles = css`
    :host {
        display: block;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 1rem;
        background-color: white;
    }

    h2 {
        margin-top: 0;
        font-size: 1.25rem;
    }

    p {
        font-size: 1rem;
        color: #333;
    }
`;

Каждый компонент получает собственный shadow DOM, что предотвращает конфликт селекторов между компонентами и основной страницей.

Медиа-запросы и адаптивные стили

FAST Element позволяет использовать любые CSS-фичи, включая медиа-запросы:

const responsiveButtonStyles = css`
    button {
        padding: 0.5rem 1rem;
        font-size: 16px;
    }

    @media (max-width: 600px) {
        button {
            padding: 0.25rem 0.5rem;
            font-size: 14px;
        }
    }
`;

Такой подход обеспечивает адаптивность компонентов без изменения логики JavaScript.

Важные рекомендации

  • Использовать :host для глобальных настроек компонента (размер, display, фон).
  • Внутренние элементы оформлять через селекторы, не забывая о shadow DOM.
  • Разделять базовые и специфические стили для повторного использования.
  • Активно применять CSS-переменные для поддержки тем и динамических изменений.
  • Объединять стили через шаблонные литералы для модульной архитектуры.

Объявление стилей в FAST Element — это сочетание изоляции, модульности и гибкости, что делает компоненты легко настраиваемыми и масштабируемыми в крупных приложениях.

Оглавление