Aký je rozdiel medzi Shadow DOM, Virtual DOM a bežným DOM?

DOM (Document Object Model) je API za HTML in XML dokumente. Predstavlja drevo vozlišč, kjer vsako vozlišče ustreza elementu, atributu ali fragmentu besedila dokumenta. Uporablja se za dostop in manipulacijo strukture, stilov in vsebine spletnih strani. Neposredne manipulacije z DOM-om so lahko počasne zaradi potrebe po ponovnem izračunu stilov, postavitve in ponovnem risanju.

Virtual DOM je koncept, ki se uporablja v okvirih, kot so React ali Vue. Je predstavitev drevesa DOM, shranjena v pomnilniku. Ko se podatki komponente spremenijo, okvir ustvari novo virtualno drevo DOM. Nato ga primerja s prejšnjim (diffing) in določi minimalni nabor sprememb, ki jih je treba uporabiti na pravi DOM. To optimizira posodobitev strani z minimalizacijo dragih operacij z realnim DOM-om.

Shadow DOM je spletni standard, ki omogoča inkapsulacijo strukture, stilov in vedenja komponente. Ustvari skrito "senčeno" drevo DOM, povezano z elementom v običajnem DOM-u (gostujoči element). Vsebina Shadow DOM je izolirana od preostalega dokumenta: stili znotraj nje ne vplivajo na zunanji svet, in obratno. To je uporabno za ustvarjanje ponovno uporabnih, izoliranih komponent, na primer <video> ali <input type="range">.

Glavne razlike:

Značilnost	Običajen DOM	Virtual DOM	Shadow DOM
Predstavitev	Pravi drevo dokumenta API	Lahek prikaz DOM v pomnilniku	Inkapsulirano drevo DOM
Namen	API za dostop in spremembe dokumenta	Optimizacija posodobitev DOM	Inkapsulacija komponent
Manipulacije	Neposredne	Posredne (prek primerjave različic)	Neposredne, a le znotraj "sence"
Izolacija stilov	Ne	Ne (če ne uporabljate CSS-in-JS ali modulov)	Da
Standard	Del spletne platforme	Koncept okvirov	Del spletne platforme