Koja je razlika između Shadow DOM, Virtual DOM i običnog DOM-a?

DOM (Document Object Model) je API za HTML i XML dokumente. Predstavlja stablo čvorova, gde svaki čvor odgovara elementu, atributu ili tekstualnom fragmentu dokumenta. Koristi se za pristup i manipulaciju strukturom, stilovima i sadržajem veb stranica. Direktne manipulacije DOM-om mogu biti spore zbog potrebe za ponovnim računanjem stilova, rasporeda i ponovnim crtanjem.

Virtual DOM je koncept koji se koristi u okvirima kao što su React ili Vue. To je predstavljanje stabla DOM koje se čuva u memoriji. Kada se podaci komponente promene, okvir kreira novo virtualno stablo DOM-a. Zatim ga upoređuje sa prethodnim (diffing) i određuje minimalni skup promena koje treba primeniti na pravi DOM. Ovo optimizuje ažuriranje stranice minimiziranjem skupih operacija sa pravim DOM-om.

Shadow DOM je web standard koji omogućava inkapsulaciju strukture, stilova i ponašanja komponente. Kreira skriveno "senčeno" stablo DOM-a, povezano sa elementom u običnom DOM-u (host element). Sadržaj Shadow DOM-a je izolovan od ostatka dokumenta: stilovi unutar njega ne utiču na spoljašnji svet, i obrnuto. Ovo je korisno za kreiranje ponovo upotrebljivih, izolovanih komponenti, poput <video> ili <input type="range">.

Glavne razlike:

Karakteristika	Običan DOM	Virtual DOM	Shadow DOM
Predstavljanje	Pravi dokumentovni API stablo	Lagan prikaz DOM-a u memoriji	Inkapsulovano stablo DOM-a
Svrha	API za pristup i izmenu dokumenta	Optimizacija ažuriranja DOM-a	Inkapsulacija komponenti
Manipulacije	Direktne	Indirektne (kroz poređenje verzija)	Direktne, ali samo unutar "senke"
Izolacija stilova	Ne	Ne (ako se ne koristi CSS-in-JS ili moduli)	Da
Standard	Deo veb platforme	Koncept okvira	Deo veb platforme