Qual è la differenza tra Shadow DOM, Virtual DOM e DOM normale?

DOM (Document Object Model) è un'API per documenti HTML e XML. Rappresenta un albero di nodi, dove ogni nodo corrisponde a un elemento, attributo o frammento di testo del documento. È usato per accedere e manipolare la struttura, gli stili e il contenuto delle pagine web. Le manipolazioni dirette del DOM possono essere lente a causa della necessità di ricalcolare stili, layout e ridisegnare.

Virtual DOM è un concetto usato in framework come React o Vue. È una rappresentazione dell'albero DOM memorizzata in memoria. Quando i dati del componente cambiano, il framework crea un nuovo albero Virtual DOM. Poi lo confronta con il precedente (diffing) e determina il minimo insieme di modifiche da applicare al DOM reale. Questo permette di ottimizzare l'aggiornamento della pagina, minimizzando operazioni costose sul DOM reale.

Shadow DOM è uno standard web che permette di incapsulare la struttura, gli stili e il comportamento di un componente. Crea un albero DOM "ombra" nascosto, collegato a un elemento nel DOM normale (elemento host). Il contenuto del Shadow DOM è isolato dal resto del documento: gli stili al suo interno non influenzano il mondo esterno, e viceversa. È utile per creare componenti riutilizzabili e isolati, come <video> o <input type="range">.

Principali differenze:

Caratteristica	DOM normale	Virtual DOM	Shadow DOM
Rappresentazione	Albero reale del documento API	Rappresentazione leggera del DOM in memoria	Albero DOM incapsulato
Scopo	API per accesso e modifica del documento	Ottimizzazione aggiornamenti DOM	Incapsulamento componenti
Manipolazioni	Dirette	Indirette (tramite confronto di versioni)	Dirette, ma solo all'interno "dell'ombra"
Isolamento stili	No	No (a meno di usare CSS-in-JS o moduli)	Sì
Standard	Parte della piattaforma web	Concetto di framework	Parte della piattaforma web