Семантическая разметка

FAST Element — это библиотека для создания веб-компонентов, предоставляющая мощные инструменты для декларативного описания интерфейсов и работы с реактивными данными. Семантическая разметка в FAST Element играет ключевую роль для поддержания доступности, улучшения SEO и упрощения взаимодействия компонентов с внешней средой.

Основы шаблонов FAST

Шаблоны в FAST Element создаются с использованием функции html из пакета @microsoft/fast-element. Шаблон описывает структуру компонента и связывает его с реактивными свойствами:

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

const template = html<MyComponent>`
  <section class="card">
    <header>
      <h1>${x => x.title}</h1>
    </header>
    <main>
      <p>${x => x.content}</p>
    </main>
    <footer>
      <small>${x => x.footer}</small>
    </footer>
  </section>
`;

export class MyComponent extends FASTElement {
  title = "Заголовок";
  content = "Основной текст компонента";
  footer = "Подвал";
}

В этом примере используются семантические HTML-теги: <section>, <header>, <main> и <footer>. Такие теги не только структурируют документ, но и помогают вспомогательным технологиям (например, скринридерам) правильно интерпретировать контент.

Использование aria-атрибутов

Для компонентов с интерактивными элементами важно добавлять ARIA-атрибуты. FAST Element позволяет динамически связывать их с состоянием компонента:

const template = html<MyComponent>`
  <button
    aria-pressed="${x => x.isActive}"
    @click="${x => x.toggleActive()}"
  >
    ${x => x.isActive ? 'Включено' : 'Выключено'}
  </button>
`;

export class MyComponent extends FASTElement {
  isActive = false;

  toggleActive() {
    this.isActive = !this.isActive;
  }
}

Использование aria-pressed обеспечивает доступность для пользователей, которые используют клавиатуру или вспомогательные технологии. FAST Element автоматически обновляет атрибуты при изменении реактивных свойств, что снижает риск рассинхронизации состояния и интерфейса.

Структурирование сложных компонентов

Для крупных компонентов рекомендуется разделять семантику на вложенные FAST-компоненты. Это повышает читаемость и переиспользуемость кода:

const cardHeader = html<CardHeader>`
  <header>
    <h2>${x => x.title}</h2>
  </header>
`;

const cardBody = html<CardBody>`
  <main>
    <p>${x => x.description}</p>
  </main>
`;

const cardFooter = html<CardFooter>`
  <footer>
    <small>${x => x.footerText}</small>
  </footer>
`;

const cardTemplate = html<MyCard>`
  <section class="card">
    <card-header title="${x => x.title}"></card-header>
    <card-body description="${x => x.content}"></card-body>
    <card-footer footer-text="${x => x.footer}"></card-footer>
  </section>
`;

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

Стилизация и семантика

FAST Element позволяет интегрировать CSS через css и Shadow DOM. Использование Shadow DOM не нарушает семантическую структуру, если правильно проектировать внутренние слоты и обеспечивать доступ к ARIA-атрибутам:

const styles = css`
  :host {
    display: block;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  header {
    background-color: #f0f0f0;
    padding: 8px;
  }
  main {
    padding: 16px;
  }
  footer {
    font-size: 0.8rem;
    color: #666;
    padding: 8px;
  }
`;

export class MyComponent extends FASTElement {
  static styles = styles;
}

При правильной семантической разметке, даже при использовании Shadow DOM, компоненты остаются доступными и структурно корректными.

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

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

const template = html<MyListComponent>`
  <ul>
    ${x => x.items.map(item => html`<li>${item}</li>`)}
  </ul>
`;

export class MyListComponent extends FASTElement {
  items = ["Элемент 1", "Элемент 2", "Элемент 3"];
}

Использование реактивного рендеринга через .map() гарантирует, что структура <ul> и <li> остаётся семантически правильной даже при обновлении данных.