Jaké jsou rozdíly mezi shadow DOM, virtual DOM a běžným DOM?

Shadow DOM:

• enkapsulace: Vytváří samostatný, izolovaný strom DOM uvnitř hlavního dokumentu. Styly a skripty uvnitř Shadow DOM standardně neovlivňují hlavní dokument a naopak.
• scoping: Ideální pro vytváření znovu použitelných, nezávislých komponent (například webových komponent).
• rendering: Prohlížeč přímo vykreslí Shadow DOM.

Virtuální DOM:

• abstrakce: Je reprezentací DOM ve formě JavaScriptových objektů v paměti.
• diffing a patching: Používají ho frameworky (například React) k optimalizaci aktualizací. Při změně stavu framework vytvoří novou verzi Virtual DOM, porovná ji s předchozí (diffing) a aplikuje pouze potřebné změny na skutečný DOM (patching).
• výkon: Zlepšuje výkon při častých aktualizacích DOM, minimalizuje přímou interakci s API prohlížeče.
• není to funkce prohlížeče: Je to koncept implementovaný na úrovni JavaScriptu, nikoli nativní funkce prohlížeče.

Obvyklý DOM (Document Object Model):

• reprezentace: Představuje strom uzlů (prvky, atributy, text), odpovídající struktuře HTML dokumentu.
• API: Poskytuje API pro přístup a manipulaci se strukturou a obsahem dokumentu.
• rendering: Prohlížeč vykreslí skutečný DOM.
• přímá manipulace: Změny jsou prováděny přímo na skutečném DOM, což může být pomalé při velkém počtu aktualizací.

Souhrnná tabulka:

Vlastnost	Shadow DOM	Virtual DOM	Obvyklý DOM
Účel	Zapouzdření komponentů	Optimalizace aktualizací DOM	Zobrazení struktury HTML
Povaha	Nativní funkce prohlížeče	Koncept implementovaný v JS	Nativní struktura prohlížeče
Izolace	Ano, na úrovni DOM a CSS	Ne, je to pouze reprezentace	Ne
Interakce	Přímá interakce s prohlížečem	Nejprve diffing/patching, pak DOM	Přímá interakce s prohlížečem
Použití	Webové komponenty	Frameworky (React, Vue atd.)	Základní webové API