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

Shadow DOM zapúzdruje štruktúru a štýl prvku, vytvára izolované stromové štruktúry v rámci hlavného DOM. To zabraňuje úniku štýlov a logiky, čo umožňuje vytvárať opakovane použiteľné komponenty.

Virtual DOM je ľahké zobrazenie DOM v pamäti. Namiesto priamej manipulácie s reálnym DOM sa zmeny najskôr aplikujú na virtuálny DOM. Následne algoritmus porovná staré a nové virtuálne stromy (diffing) a aktualizuje iba tie časti reálneho DOM, ktoré sa zmenili (patching). To minimalizuje nákladné operácie s reálnym DOM a zvyšuje výkon pri častých aktualizáciách.

Bežný DOM (Document Object Model) je API na interakciu s HTML dokumentmi. Reprezentuje štruktúru dokumentu ako strom uzlov, čo umožňuje programom pristupovať k obsahu, štruktúre a štýlu dokumentu a ich upravovať. Priame manipulácie s DOM môžu byť neefektívne pri veľkých zmenách.

Vlastnosť	Shadow DOM	Virtual DOM	Bežný DOM
Účel	Izolácia štruktúry a štýlov	Optimalizácia aktualizácií	API na prácu s HTML dokumentmi
Zobrazuje	Vnořený strom uzlov v rámci prvku	Ľahké zobrazenie DOM v pamäti	Strom uzlov skutočného HTML dokumentu
Mechanizmus	Vytváranie izolovaného podstromu	Diffing (porovnávanie) a patching (aktualizácia)	Priama manipulácia uzlov
Hlavné výhody	Izolácia, opätovné použitie komponentov	Výkon pri častých aktualizáciách	Štandardný spôsob interakcie s dokumentom
Používa sa v	Web Components	React, Vue.js, Inferno a pod.	Prehliadače, JavaScript API