Почему Web Components — это следующий шаг для дизайн-систем

Дизайн-системы стали стандартом в веб-разработке. Единый источник для стилей, компонентов и паттернов сильно упрощает работу команд. Однако в какой-то момент возникла проблема: большинство дизайн-систем начали строить под конкретные фреймворки.

Получилось странное противоречие. Инструменты, которые должны были быть универсальными, оказались привязаны к React, Vue или Angular. Это как создать универсальную зарядку, а потом намертво припаять её к одной модели телефона.

Парадокс дизайн-систем

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

В результате разработчики оказались перед выбором: либо использовать дизайн-систему (если проект на нужном фреймворке), либо писать всё с нуля. По сути, это не дизайн-система, а просто набор компонентов для конкретной технологии.

Сегодня есть более логичный подход. Web Components позволяют создавать компоненты на основе открытых стандартов — без привязки к фреймворку.

В чём преимущества Web Components

Web Components не выглядят революционно. Но они реально помогают решить несколько важных проблем:

• Работают везде — поддерживаются в React, Vue, Angular, Svelte и даже в чистом JavaScript.
• Основаны на стандартах — используют HTML, CSS и JavaScript, которые не устареют через пару лет.
• Не зависят от фреймворка — компонент остаётся просто кнопкой или карточкой, а не «React-компонентом».

Простота как основа

Web Components требуют другого подхода к архитектуре. Не нужно добавлять сложную логику и реактивность в каждом компоненте. Лучше оставить компоненты простыми:

• Компонент должен выполнять только свою основную задачу.
• Чем проще поведение, чем меньше он «знаёт» о бизнес-логике, то тем проще его переиспользовать.
• Многие сложности возникают не от необходимости, а от привычки строить компоненты внутри фреймворка.

Как выглядит код Web Component

Создать базовый компонент можно без сложных сборок. Вот пример простой кнопки:

class VibeButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          --padding: var(--spacing-md, 12px);
          --bg: var(--primary-color, #0066ff);
        }
        
        button {
          padding: var(--padding);
          background: var(--bg);
          border: none;
          cursor: pointer;
        }
      </style>
      <button><slot></slot></button>
    `;
  }
}

customElements.define('vibe-button', VibeButton);

Этот код работает без дополнительных инструментов. Используется Shadow DOM для encapsulation и CSS custom properties для тематизации. Компонент можно сразу подключаить в Next.js, Astro или чистый JavaScript.

Как Web Components меняют работу команды

Когда дизайн-система построена на Web Components, она становится самодокументируемой. Разработчики не нужд