Jaký je rozdíl mezi Shadow DOM, Virtual DOM a běžným DOM?

Shadow DOM zapouzdřuje strukturu a styl prvku a vytváří izolované stromové struktury uvnitř hlavního DOM. To zabraňuje úniku stylů a logiky, což umožňuje vytvářet znovupoužitelné komponenty.

Virtual DOM je lehké zobrazení DOM v paměti. Místo přímé manipulace s reálným DOM se změny nejdříve aplikují na virtuální DOM. Poté algoritmus porovná staré a nové virtuální stromy (diffing) a aktualizuje pouze části reálného DOM, které se změnily (patching). To minimalizuje nákladné operace s reálným DOM a zvyšuje výkon při častých aktualizacích.

Obvyklé DOM (Document Object Model) je API pro interakci s HTML dokumenty. Reprezentuje strukturu dokumentu jako strom uzlů, což umožňuje programům přístup k obsahu, struktuře a stylu dokumentu a jejich úpravy. Přímé manipulace s DOM mohou být neefektivní při velkých změnách.

Vlastnost	Shadow DOM	Virtual DOM	Obvyklé DOM
Účel	Zapouzdření struktury a stylů	Optimalizace aktualizací	API pro práci s HTML dokumenty
Reprezentuje	Vnořený strom uzlů uvnitř prvku	Lehká reprezentace DOM v paměti	Strom uzlů skutečného HTML dokumentu
Mechanismus	Vytváření izolovaného podstromu	Diffing (porovnání) a patching (aktualizace)	Přímá manipulace uzlů
Hlavní výhody	Izolace, opětovné použití komponent	Výkon při častých aktualizacích	Standardní způsob práce s dokumentem
Používá se v	Web Components	React, Vue.js, Inferno a další	Prohlížeče, JavaScript API