Creare un Web Component in HTML è un processo che consente di realizzare elementi personalizzati riutilizzabili, estendendo le funzionalità native del DOM. Questa tecnologia sfrutta un insieme di API moderne che includono custom elements, shadow DOM e template HTML. Offrono una soluzione elegante per creare interfacce modulari, scalabili e riutilizzabili.

Per iniziare, definiamo i passaggi principali:

• Creare un custom element: definizione di un nuovo elemento HTML, come possono esserelo un div o input, personalizzato tramite l'API `customElements.define`.


• Utilizzare lo shadow DOM: garantendo che lo stile e il comportamento del componente siano isolati dal resto della pagina.


• Definire il template HTML: un modello riutilizzabile per il contenuto e lo stile del componente.

class MyButton extends HTMLElement {  
  constructor() {  
    super();  
    const shadow = this.attachShadow({ mode: 'open' });  
  
    // Bottone
    const button = document.createElement('button');  
    button.textContent = 'Cliccami';  
  
    // Stile
    const style = document.createElement('style');  
    style.textContent = `  
      button {  
        background-color: #6200ea;  
        color: white;  
        border: none;  
        border-radius: 5px;  
        padding: 10px 20px;  
        font-size: 16px;  
        cursor: pointer;  
      }  
      button:hover {  
        background-color: #3700b3;  
      }  
    `;  
  
    // Aggiunta a shadow DOM
    shadow.appendChild(style);  
    shadow.appendChild(button);  
  }  
}  
   
// Registrazione elemento 
customElements.define('my-button', MyButton);

Una volta definito il custom element, possiamo utilizzarlo in qualsiasi punto del nostro HTML

<my-button id="myButton"></my-button> 
<button>Cliccami esterno</button> 

Grazie allo shadow DOM, il nostro componente risulta isolato, tant'è che gli stili applicati all'interno del codice javascript non si riflettono sul bottone definito esternamente, pur mantenendo tutte le proprietà di un elemento HTML, come la risposta ad un evento di click

var button = document.getElementById('myButton');
button.addEventListener('click', () => {  
  alert('Hai cliccato il pulsante!');  
});