Web Components: A Nova Era para Design Systems

Design systems mudaram a forma como desenvolvemos interfaces. Ter uma referência única para padrões visuais e componentes facilita muito o dia a dia dos times. Porém, ao longo dos anos, cometemos um erro importante: construímos esses sistemas dentro de frameworks específicos.

Parece inofensivo, mas não é. Ao trancar os componentes em React, Vue ou Angular, perdemos exatamente aquilo que um design system deveria oferecer: liberdade e reutilização em qualquer lugar.

O Paradoxo dos Design Systems

A ideia por trás dos design systems sempre foi boa. Criar consistência, documentar decisões e evitar retrabalho. O problema surgiu na execução: a maioria das bibliotecas de componentes acabou presa a um único framework.

O resultado? Quando sua equipe não usa o mesmo framework, você precisa escolher entre adotar o design system ou construir tudo do zero. Isso não é um design system de verdade. É apenas uma coleção de componentes limitada por escolhas tecnológicas.

Enquanto isso, os padrões da web evoluíram. Hoje, com Web Components, é possível criar componentes que funcionam independentemente de qualquer framework.

Por Que Web Components São Vantajosos

Web Components não são a tecnologia mais comentada do momento. Mas resolvem problemas reais de forma simples e duradoura.

Independência de framework: Eles trabalham com React, Vue, Angular, Svelte ou até mesmo projetos sem framework. Seu design system não fica restrito a uma única tecnologia.

Baseado em padrões web: Como são construídos com tecnologias nativas, Web Components não dependem de abstrações que podem mudar com o tempo. O que você cria hoje tende a funcionar por muitos anos.

Portabilidade real: Um botão feito com Web Components é apenas um botão. Ele se comporta da mesma forma em qualquer contexto, sem precisar de adaptações específicas.

Mudança de Abordagem: Menos é Mais

Para criar um design system que funciona em múltiplos frameworks, precisamos pensar diferente.

Apostar na simplicidade: Web Components são leves por natureza. Eles não precisam de sistemas de reatividade ou gerenciamento de estado avançado. Basta que eles cumpram seu propósito.

Componentes diretos: Um botão não precisa ser inteligente. Um modal também não. Quanto mais simples o componente, maior a chance de ele ser usado em qualquer lugar sem depender de lógica específica.

Muitas vezes, a aparente necessidade de complexidade vem da forma como construímos componentes dentro de frameworks. Quando só temos reatividade, vemos problemas que só podem ser resolvidos com reatividade.

Como Construir Um Web Component

A prática é mais simples do que parece. Veja um exemplo de um botão básico:

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

  connectedCallback() {
    this.render();
  }

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

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

这个