Care este diferența dintre Shadow DOM, Virtual DOM și DOM-ul obișnuit?

DOM (Document Object Model) este o API pentru documentele HTML și XML. Reprezintă un arbore de noduri, unde fiecare nod corespunde unui element, atribut sau fragment de text al documentului. Este utilizat pentru accesarea și manipularea structurii, stilurilor și conținutului paginilor web. Manipulările directe ale DOM pot fi lente din cauza necesității de recalculare a stilurilor, a layout-ului și de re-redare.

Virtual DOM este un concept utilizat în framework-uri precum React sau Vue. Este o reprezentare a arborelui DOM stocată în memorie. Când datele componentelor se schimbă, framework-ul creează un nou arbore Virtual DOM. Apoi îl compară cu arborele virtual anterior (diffing) și determină setul minim de modificări care trebuie aplicate DOM-ului real. Acest lucru optimizează actualizarea paginii, minimizând operațiile costisitoare asupra DOM-ului real.

Shadow DOM este un standard web care permite încapsularea structurii, stilurilor și comportamentului unui component. Creează un arbore DOM "umbră" ascuns, conectat la un element din DOM-ul normal (element gazdă). Conținutul Shadow DOM este izolat de restul documentului: stilurile din interiorul său nu afectează lumea exterioară și viceversa. Acest lucru este util pentru crearea de componente reutilizabile și izolate, precum <video> sau <input type="range">.

Diferențele principale:

Caracteristică	DOM normal	Virtual DOM	Shadow DOM
Reprezentare	Arbore real al API-ului documentului	Reprezentare ușoară a DOM-ului în memorie	Arbore DOM încapsulat
Scop	API pentru acces și modificare document	Optimizarea actualizărilor DOM	Încapsularea componentelor
Manipulări	Directe	Indirecte (prin compararea versiunilor)	Directe, dar doar în "umbra"
Izolare stiluri	Nu	Nu (dacă nu se folosește CSS-in-JS sau module)	Da
Standard	Parte a platformei web	Concept de framework-uri	Parte a platformei web