Web Components: En enklere vej til fremtidssikrede design systems

Design systems har ændret måden, vi arbejder på. En fælles kilde til komponenter, mønstre og designbeslutninger giver ro i maven. Men undervejs gik det galt. Vi byggede vores systemer inde i rammeværker som React, Vue og Angular – og låste dermed designbeslutningerne fast til ét økosystem.

Det er lidt som at lave en universaloplader og så lodde den fast til én telefon. Sådan fungerer det ikke i længden.

Design systems i en knibe

Design systems opstod af et reelt behov. Teams ville have genbrug, konsistens og bedre dokumentation. Men løsningen blev ofte et bibliotek, der kun virkede i ét rammeværk. Det er ikke et rigtigt design system. Det er et rammeværk med ekstra trin.

Resultatet er, at teams enten må holde sig til det samme rammeværk – eller starte forfra med komponenter, når de skifter teknologi.

Hvorfor web components løser problemet

Web components er bygget på åbne webstandarder. De bruger custom elements, shadow DOM og almindelig JavaScript. Det betyder, at de fungerer på tværs af rammeværker uden at kræve særlige tilpasninger.

De er ikke flashy eller trendy. De er dog stabile, bærbare og fremtidssikrede. En button eller modal, der er skrevet som web component, kan bruges i Next.js, Astro, Svelte eller et gammelt vanilla JavaScript-projekt – uden ekstra arbejde.

Enklere er bedre

Når du bygger med web components, må du lade dig inspirere af et mind-set, der hedder "enklere er bedre".

• Laveste levedygtige niveau: Komponenterne skal være lette. De er ikke anvist til at være en del fra et rammeværk med tilføjede funktioner.
• Dummere komponenter: En button skal gøre en ting godt. Den skal ikke indeholde ekstra logic eller state management. Det gør dem brugsdygtige på flere måder.

Det fører til mere genbrug og mindre afhængighed.

Det praktiske eksempel

Det er simple og straightforward at implementere en web component.

class VibeButton 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: var(--vibe-border, none);
          cursor: pointer;
        }
      </style>
        <button><slot></slot></button>
    `;
    }
}

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

No build tools or frameworks overhead. CSS custom properties allow theming. This works in your Next.js app, vanilla JavaScript project, or an Astro site.

En design system, der vokser

En web component library med dokumentation i samme repo giver en levende reference. HTML er dokumentationen. Komponenterne er standard HTML, which means that the documentation is self-documenting.

Hvad betyder det for din stack?

Hvis du er ind låst i et rammeværk, kan du:

• Start fresh: New projects can use web component design systems from day one.
• Gradual migration: New components built as web components. Wrap old ones if needed.
• Future-proof: Web components are standardized and browser-supported.

Den rigtige vinst

En virkelig bærbare design system giver:

• Team can use components across frameworks
• Migration between frameworks is less painful
• Investment in design system spreads across projects
• Documentation and components stay in sync

Kom i gang

Start med en enkel komponent. Brug HTML, CSS og vanilla JavaScript. Brug CSS custom properties for theming. Dokumenter den direkte i code. Ship it to your team.

Web components giver dig en chance for at realisere det oprindelige promise af design systems: universelle, bærbare komponenter, der virker overalt.