Web Components: la vera chiave per design system davvero indipendenti

I design system sono ormai parte integrante del modo di lavorare di molti team. Una fonte unica per colori, pattern e componenti condivisi. Ma negli ultimi anni abbiamo commesso un errore di fondo: abbiamo costruito questi sistemi dentro framework specifici.

Sembra un dettaglio, ma cambia tutto. Creiamo strumenti che dovrebbero essere flessibili e riutilizzabili, poi li chiudiamo dentro React, Vue o Angular. È come progettare un adattatore universale e poi saldarlo a un solo tipo di presa.

Il paradosso dei design system

Il boom dei design system era inevitabile. Le aziende volevano coerenza visiva e componenti riutilizzabili. Il problema è che, nella pratica, molti team hanno finito per creare librerie legate a un solo framework. Il risultato? Se usi quel framework, puoi sfruttare il sistema. Se non lo usi, devi ripartire da zero.

Non è più un design system. È una libreria di componenti vincolata a un ecosistema.

Nel frattempo, le tecnologie web standard hanno raggiunto un livello di maturità tale da rendere possibile un approccio diverso. I web components, basati su custom elements e shadow DOM, permettono di creare componenti che funzionano ovunque senza dipendere da framework.

Perché i web components fanno la differenza

Non sono la scelta più "moda". Non portano popolarità nelle conferenze. Ma risolvono un problema concreto in modo semplice ed efficace.

• Indipendenti dal framework: funzionano con React, Vue, Angular, Svelte o anche senza framework. Non restano intrappolati in un solo ambiente di sviluppo.
• Basati su standard: usano HTML, CSS e JavaScript nativi. Non richiedono layer di astrazione che rischiano di diventare obsoleti.
• Veramente portatili: un pulsante non è un "React button". È semplicemente un pulsante. E un web component lo fa funzionare nello stesso modo ovunque.

Cambiare prospettiva: meno è più

Quando si vuole creare un design system che duri nel tempo, bisogna accettare un principio semplice: adottare la semplicità.

I componenti devono fare una cosa sola e farla bene. Non hanno bisogno di logica di business o gestione dello stato avanzata. Troppo "cervello" significa meno riutilizzabilità. E spesso questa complessità non è necessaria: è solo il residuo di quando si costruiscono componenti all’interno di un framework reattivo.

Implementazione pratica

Un web component si può scrivere con una sola classe JavaScript. Ecco un esempio semplice:

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