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

DOM (Document Object Model) je API pro HTML a XML dokumenty. Představuje strom uzlů, kde každý uzel odpovídá prvku, atributu nebo textovému fragmentu dokumentu. Používá se k přístupu a manipulaci se strukturou, styly a obsahem webových stránek. Přímé manipulace s DOM mohou být pomalé kvůli nutnosti přepočtu stylů, rozvržení a překreslení.

Virtuální DOM je koncept používaný ve frameworkech jako React nebo Vue. Je to reprezentace stromu DOM, která je uložena v paměti. Když se data komponenty změní, framework vytvoří nový virtuální strom DOM. Poté jej porovná s předchozím (diffing) a určí minimální sadu změn, které je třeba aplikovat na skutečné DOM. To optimalizuje aktualizaci stránky minimalizací nákladných operací s reálným DOM.

Shadow DOM je webový standard, který umožňuje enkapsulaci struktury, stylů a chování komponenty. Vytváří skrytý "stínový" strom DOM, připojený k elementu v běžném DOM (host element). Obsah Shadow DOM je izolován od zbytku dokumentu: styly uvnitř něj neovlivňují vnější svět a naopak. To je užitečné pro vytváření znovu použitelných, izolovaných komponent, například <video> nebo <input type="range">.

Hlavní rozdíly:

Charakteristika	Obvyklé DOM	Virtuální DOM	Shadow DOM
Zobrazení	Skutečný strom dokumentu API	Lehká reprezentace DOM v paměti	Inkapslený strom DOM
Účel	API pro přístup a změny dokumentu	Optimalizace aktualizací DOM	Inkapsulace komponent
Manipulace	Přímé	Nepřímé (přes porovnání verzí)	Přímé, ale pouze uvnitř "stínu"
Izolace stylů	Ne	Ne (pokud nepoužíváte CSS-in-JS nebo moduly)	Ano
Standard	Část webové platformy	Koncept frameworků	Část webové platformy