CSS-функция

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

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

Функция css

Функция css используется для создания объекта стилей, который может быть применён к компоненту через свойство styles. Она принимает шаблонные строки и возвращает объект CSSDirective, который библиотека использует для управления стилями.

Пример базового синтаксиса:

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

const buttonStyles = css`
  :host {
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 4px;
    background-color: #0078d4;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

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

class MyButton extends FASTElement {
  static styles = buttonStyles;
}

customElements.define('my-button', MyButton);

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

  • :host — псевдокласс для обращения к корневому элементу компонента. Позволяет задавать стили самому компоненту, а не его внутренним элементам.
  • Возможность использовать псевдоклассы и псевдоэлементы аналогично обычному CSS.
  • transition, hover, focus работают в полной мере, как в стандартном CSS.

Поддержка CSS-переменных

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

Пример:

const themeStyles = css`
  :host {
    --primary-color: #0078d4;
    --hover-color: #005a9e;
    background-color: var(--primary-color);
    color: white;
  }

  :host(:hover) {
    background-color: var(--hover-color);
  }
`;

Преимущества использования переменных:

  • Простая смена темы без изменения кода компонента.
  • Поддержка динамического обновления через Jav * aScript:
document.querySelector('my-button').style.setProperty('--primary-color', 'red');

Комбинирование стилей

Функция css поддерживает комбинацию нескольких наборов стилей. Это особенно полезно при переиспользовании общих стилей между компонентами.

const baseStyles = css`
  :host {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
`;

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

class MyCard extends FASTElement {
  static styles = [baseStyles, cardStyles];
}
  • Передача массива стилей позволяет создавать модульные и масштабируемые CSS-наборы.
  • Приоритет применяется в порядке передачи: последний стиль может переопределять предыдущие правила.

Динамические CSS-выражения

FAST Element позволяет использовать динамические значения в стилях через функцию html и биндинг. Это даёт возможность реактивно менять стили в зависимости от состояния компонента.

Пример с реактивным цветом:

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

const dynamicStyles = css`
  :host {
    display: block;
    padding: 1em;
    background-color: ${x => x.bgColor};
    color: white;
    border-radius: 4px;
  }
`;

class MyBox extends FASTElement {
  @observable bgColor = '#0078d4';
  static styles = dynamicStyles;
}

customElements.define('my-box', MyBox);
  • observable делает свойство реактивным.
  • Использование ${x => x.property} позволяет автоматически обновлять стиль при изменении свойства.

Встроенные и глобальные стили

FAST Element поддерживает два типа стилей:

  1. Локальные стили компонента — через static styles или @css.
  2. Глобальные стили — через FASTDesignSystemProvider или <style> в документе.

Локальные стили изолированы и не влияют на другие компоненты, что предотвращает конфликт CSS в крупных приложениях.

CSS и слоты

Компоненты FAST Element активно используют слоты. Стили можно направленно применять к контенту слота:

const slotStyles = css`
  ::slotted(p) {
    font-style: italic;
    color: gray;
  }
`;
  • ::slotted(selector) позволяет стилизовать элементы, переданные через слот.
  • Прямое применение обычного селектора (p) не затронет контент слота из-за Shadow DOM.

Заключение по CSS в FAST Element

Использование функции css в FAST Element предоставляет мощные возможности для управления стилями компонентов:

  • Полная интеграция с Shadow DOM и изоляция стилей.
  • Поддержка CSS-переменных и реактивных свойств.
  • Комбинирование нескольких наборов стилей для модульности.
  • Работа со слотами и псевдоклассами аналогично обычному CSS.

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

Оглавление