Varför webbkomponenter är framtiden för designsystem

Designsystem har blivit en självklar del av moderna utvecklingsprojekt. De samlar designbeslut, komponenter och mönster på ett ställe. Men någonstans längs vägen gjorde vi ett misstag – vi byggde dem inuti specifika ramverk.

Det låter kanske inte så dramatiskt, men det är det. Vi skapade verktyg som skulle fungera överallt och sedan låste vi in dem bakom React, Vue eller Angular. Som att bygga en universalladdare och sen löda fast den i en enda telefon.

Designsystemens paradox

Behovet av designsystem uppstod naturligt. Team ville ha återanvändbara mönster, dokumentation och visuell konsistens. Men ofta blev resultatet ramverksspecifika komponentbibliotek – istället för riktiga designsystem som kan användas brett.

Problemet är att en komponent som bara finns i React skapar en konstgjord barriär. Antingen använder du det ramverket redan, eller så får du bygga allt själv. Det är inte ett designsystem. Det är ett ramverksbibliotek med högre ambitioner.

Samtidigt har webbsstandarderna mognat. Med web components, baserade på custom elements och shadow DOM, finns nu en väg framåt som faktiskt matchar det ursprungliga löftet.

Varför web components har övertaget

Web components är inget trendigt buzzword. De är stabila, standardiserade och löser ett konkret problem.

De fungerar i alla ramverk. React, Vue, Angular och Svelte kan alla använda dem, antingen direkt eller med minimal konfiguration. Det betyder att dina komponenter inte fastnar i ett enda ekosystem.

De bygger på webstandarder. Du arbetar direkt med plattformen – HTML, CSS och JavaScript – utan abstraktionslager som riskerar att bli inaktuella.

De är verkligen portabla. En knapp är en knapp. Den behöver inte vara en React-knapp eller en Vue-knapp. Web components gör det möjligt att bygga komponenter som fungerar lika bra i Next.js som i ett ren vanilla JavaScript-projekt.

Mindsetet som behövs

Att bygga ramverksoberoende designsystem kräver ett nytt sätt att tänka. Det handlar om att välja enkelhet.

Use the lightest possible scaffolding. Web components är redan grundläggande – de behöver inte React's reactivity eller Vue's watchers. De behöver bara göra en sak väl.

Komponenterna ska vara enkla. En knapp behöver inte innehålla state management och business logic. Det är när vi byggar komponenter i ett ramverk med reactivity tillgämd att varje problem kräver mer reactivity. Det förenklar ofta till en komplikation.

Hur man bygger en web component

Att skapa en web component är straightforward:

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(--vibe-primary, #0066ff);
          border: none;
          cursor: pointer;
        }
      </style>
        <button><slot></slot></button>
    `;
      this.shadowRoot.querySelector('button').innerHTML = this.innerHTML;
    }
  }
}

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

Designsystem som verkligen fungerar

När you ship a component library with its own documentation in a single repository, something magical happens: your design system becomes both a reference implementation and living documentation. Det spartar space.

Det spartar space.