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

Shadow DOM inkapsulira strukturu i stil elementa, stvarajući izolovano drvo unutar glavnog DOM-a. Ovo sprečava curenje stilova i logike, omogućavajući kreiranje ponovo upotrebljivih komponenti.

Virtual DOM je lagani prikaz DOM-a u memoriji. Umesto direktne manipulacije stvarnim DOM-om, promene se najpre primenjuju na virtualni DOM. Zatim algoritam upoređuje staro i novo virtualno drvo (diffing) i ažurira samo one delove stvarnog DOM-a koji su se promenili (patching). Ovo minimizira skupove skupih operacija na stvarnom DOM-u i poboljšava performanse pri čestim ažuriranjima.

Običan DOM (Document Object Model) je API za interakciju sa HTML dokumentima. Predstavlja strukturu dokumenta kao drvo čvorova, omogućavajući programima pristup i izmene sadržaja, strukture i stila dokumenta. Direktne manipulacije DOM-om mogu biti neefikasne kod velikih promena.

Osobina	Shadow DOM	Virtual DOM	Običan DOM
Svrha	Inkapsulacija strukture i stila	Optimizacija ažuriranja	API za rad sa HTML dokumentima
Predstavlja	Ugnježdeno drvo čvorova unutar elementa	Laka reprezentacija DOM-a u memoriji	Drvo čvorova stvarnog HTML dokumenta
Mehanizam	Kreiranje izolovanog poddrve	Diffing (upoređenje) i patching (ažuriranje)	Direktna manipulacija čvorovima
Glavne prednosti	Izolacija, ponovna upotreba komponenti	Performanse kod čestih ažuriranja	Standardni način interakcije sa dokumentom
Koristi se u	Web Components	React, Vue.js, Inferno i dr.	Pregledači, JavaScript API