Композиция стилей

FAST Element предоставляет мощный механизм работы со стилями, позволяя управлять визуальным оформлением компонентов через Shadow DOM, CSS Custom Properties, а также собственные методы композиции стилей. Правильная организация стилей повышает повторное использование кода, упрощает поддержку и улучшает производительность интерфейса.

Определение стилей в компоненте

В FAST Element стили определяются с помощью функции css из пакета @microsoft/fast-element:

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

const buttonStyles = css`
  :host {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-family: Arial, sans-serif;
    background-color: var(--button-background, #0078d4);
    color: var(--button-color, #ffffff);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

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

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

  • :host указывает на корневой элемент компонента.
  • CSS Custom Properties (var(--property)) обеспечивают возможность переопределения стилей при использовании компонента.
  • Поддержка псевдоклассов (:hover, :focus) полностью интегрирована.

Подключение стилей к компоненту

Стили связываются с компонентом через статическое свойство styles:

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

MyButton.styles = buttonStyles;
customElements.define("my-button", MyButton);

Использование отдельного объекта для стилей позволяет легко комбинировать их с другими стилевыми блоками.

Композиция стилей

FAST Element поддерживает объединение нескольких CSS-файлов с помощью массива:

const baseStyles = css`
  :host {
    font-family: Arial, sans-serif;
    border-radius: 4px;
  }
`;

const themeStyles = css`
  :host {
    background-color: var(--theme-background, #f0f0f0);
    color: var(--theme-color, #333333);
  }
`;

class ThemedCard extends FASTElement {}
ThemedCard.styles = [baseStyles, themeStyles];

customElements.define("themed-card", ThemedCard);

Особенности композиции:

  • Порядок элементов в массиве определяет приоритет: последние стили перекрывают предыдущие.
  • Композиция может включать как общие стили (baseStyles), так и тематические (themeStyles), что упрощает поддержку различных визуальных тем.

Миксины и наследование стилей

FAST Element поддерживает CSS-миксины, которые позволяют применять наборы правил к различным компонентам. Миксины создаются через функцию css и подключаются с помощью свойства var():

const cardMixin = css`
  --card-padding: 1rem;
  --card-background: #ffffff;
  --card-border-radius: 8px;
`;

const cardStyles = css`
  :host {
    padding: var(--card-padding);
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
`;

class CardComponent extends FASTElement {}
CardComponent.styles = [cardMixin, cardStyles];

customElements.define("card-component", CardComponent);

Преимущества миксинов:

  • Упрощают повторное использование наборов стилей.
  • Позволяют легко настраивать компоненты через CSS Custom Properties.
  • Поддерживают каскадирование и переопределение.

Инкапсуляция и Shadow DOM

FAST Element использует Shadow DOM по умолчанию, что обеспечивает локальность стилей и предотвращает нежелательное влияние внешних CSS. Все правила, определённые внутри компонента, не влияют на глобальные стили страницы. Однако можно использовать глобальные CSS-переменные для настройки внешнего вида компонентов.

Динамическое обновление стилей

FAST Element позволяет динамически менять стили через css и adoptedStyleSheets:

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

const dynamicStyles = css`
  :host {
    color: var(--dynamic-color, black);
  }
`;

class DynamicText extends FASTElement {}
DynamicText.styles = dynamicStyles;

customElements.define("dynamic-text", DynamicText);

// Изменение CSS Custom Property в рантайме
document.querySelector("dynamic-text").style.setProperty("--dynamic-color", "red");

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

  • Использование var(--property) позволяет менять стили без модификации JS-кода.
  • В комбинации с массивами стилей можно создавать сложные визуальные темы и вариативные компоненты.

Интеграция с глобальными стилями

Для глобальных тем FAST Element поддерживает подключение стилей через <style> в документе или глобальные CSS Custom Properties. В компоненте можно использовать свойства, определённые на уровне документа:

:root {
  --primary-color: #0078d4;
  --secondary-color: #e5e5e5;
}

Компонент может ссылаться на эти свойства:

:host {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

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

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

  • Разделение базовых и тематических стилей улучшает поддержку и масштабирование.
  • Использование CSS Custom Properties и миксинов делает компоненты гибкими и настраиваемыми.
  • Приоритет массива стилей следует учитывать при композиции: последние стили всегда имеют больший вес.
  • Shadow DOM обеспечивает безопасную инкапсуляцию, но при необходимости глобальные переменные позволяют интегрировать компоненты в общий визуальный язык приложения.

Композиция стилей в FAST Element объединяет возможности инкапсуляции, наследования и динамического переопределения, создавая мощный инструмент для построения сложных и гибких интерфейсов.

Оглавление