Web Components: Fremtidens designsystemer

Designsystemer har endret måten vi bygger digitale produkter på. Én kilde til sannhet for farger, komponenter og mønstre gjør det enklere å holde orden og spare tid. Men et sted på veien gjorde vi en feil: Vi låste alt inne i én rammeverk.

Det er som å bygge en universallader og så sveis den fast til én type telefon.

Paradokset med designsystemer

Behovet for konsistens og gjenbruk er reelt. Teamene trengte orden og dokumentasjon. Likevel ble de fleste løsningene bygget som React- eller Vue-biblioteker, ikke som noe som kunne leve utenfor disse økosystemene.

Når komponentene dine bare fungerer i én rammeverk, skaper du et falskt valg: enten bruker du designsystemet (hvis du allerede er på riktig rammeverk), eller så bygger du alt på nytt. Det er ikke et designsystem – det er et rammeverksbibliotek med høyere ambisjoner.

Hvorfor web components vinner

Web components er ikke trendy. De gir ikke mye oppmerksomhet på konferanser. Men de løser et grunnleggende problem: de er bygget på åpne webstandarder.

Rammeverksuavhengig: De fungerer i React, Vue, Angular, Svelte og alt annet. Du kan bruke samme komponenter uansett hvilken teknologi du velger.

Bygget på plattformen: Du jobber direkte med HTML, CSS og JavaScript. Ingen abstraksjoner som blir utdatert når neste rammeverk dukker opp.

Ekte portabilitet: En knapp er bare en knapp. Den skal ikke være en React-knapp eller en Vue-knapp. Med web components kan den være nøyaktig den samme uansett hvor den brukes.

Enklere er bedre

Å bygge en designsystem med web components krever en annen tankegang: mindre er mer.

Lavest mulig nivå: Du trenger ikke Reacts reaktivitet eller Vues watchers. En komponent skal bare gjøre én jobb godt.

Enkle komponenter: En knapp skal være smart nok til å se bra ut og fungere, but dumb nok til å ikke dra med seg for mye logikk eller state. De enkleste komponentene er de mest gjenbrukbare.

Hvordan det ser ut i praksis

Å bygge en web component er enkelt. Her er et eksempel på en knapp:

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);

This is all you need. No build tools. No framework overhead. CSS custom properties for theming. This button works in Next.js, Astro, vanilla JavaScript, and even older setups.

Designsystemer som virkelig skalere

Når komponentene og dokumentasjonen ligger i én repository, blir systemet både en referanse og en levende guide. Utviklere kan se hvordan komponentene fungerer, hva de CSS custom properties de støtter, og hvordan de theme de – alle i én plass.

Hva betyr dette for din stack?

Hvis du er locked in i et rammeverksspecifikt designsystem, har du to muligheter:

Start på nytt: Nye prosjekter får umiddelbare fordeler fra web component design systems. Portabilitet og simplicity fra dag én.

Gradvis overgang: Du kan gradvis migrere. Bygg nye komponenter som web components. Wrap existing ones if needed.

Future-proof: Web components er standardisert og støttet i alle moderne browsers. De er allerede brukt av flere enterprise designsystemer.

Organisasjonsfordelene

Den største fordelen er organisatorisk, ikke teknisk. Med en virkelig portabel designsystem:

• Alle teamene kan bruke samme komponenter uansett rammeverk
• Migrering mellom rammeverk blir mindre smertefull
• Investeringen i designsystemet gir mer verdi over flere prosjekter
• Dokumentasjon og komponentene holder seg synkronisert

Kom igang i dag

1. Velg en enkel komponent – en knapp eller en card
2. Bygg den med HTML, CSS og vanilla JavaScript
3. Bruk CSS custom properties for theming
4. Dokumenter den ved siden av koden
5. Ship den til hele teamet

Ingen build tools eller rammeverk religion nødvendig. Bare god component design, web standards, og litt care.

Designsystemer har allerede skapt mye value. Web components lar oss nå endelig levere på den originale promise: virkelig universal, portable og framework-agnostic komponenter.