Jaka jest różnica między Shadow DOM, Virtual DOM a zwykłym DOM?

DOM (Document Object Model) jest API dla dokumentów HTML i XML. Reprezentuje drzewo węzłów, gdzie każdy węzeł odpowiada elementowi, atrybutowi lub fragmentowi tekstu dokumentu. Używany jest do dostępu i manipulacji strukturą, stylami i zawartością stron internetowych. Bezpośrednie manipulacje DOM mogą być wolne ze względu na konieczność ponownego obliczania stylów, układu i ponownego rysowania.

Virtual DOM to koncepcja używana w frameworkach takich jak React czy Vue. To reprezentacja drzewa DOM przechowywana w pamięci. Gdy dane komponentu się zmieniają, framework tworzy nowe wirtualne drzewo DOM. Następnie porównuje je z poprzednim (diffing) i określa minimalny zestaw zmian, które należy zastosować do rzeczywistego DOM. Pozwala to zoptymalizować aktualizację strony, minimalizując kosztowne operacje na rzeczywistym DOM.

Shadow DOM to standard webowy, który pozwala na enkapsulację struktury, stylów i zachowania komponentu. Tworzy ukryte "cień" drzewo DOM, podłączone do elementu w zwykłym DOM (element host). Zawartość Shadow DOM jest izolowana od reszty dokumentu: style wewnątrz niego nie wpływają na świat zewnętrzny i odwrotnie. Jest to przydatne do tworzenia wielokrotnego użytku, izolowanych komponentów, np. <video> lub <input type="range">.

Główne różnice:

Cecha	Zwykłe DOM	Virtual DOM	Shadow DOM
Reprezentacja	Rzeczywiste drzewo dokumentu API	Lekka reprezentacja DOM w pamięci	Ukryte drzewo DOM
Przeznaczenie	API do dostępu i modyfikacji dokumentu	Optymalizacja aktualizacji DOM	Enkapsulacja komponentów
Manipulacje	Bezpośrednie	Pośrednie (przez porównanie wersji)	Bezpośrednie, ale tylko w "cieniu"
Izolacja stylów	Nie	Nie (chyba że używa się CSS-in-JS lub modułów)	Tak
Standard	Część platformy webowej	Koncepcja frameworków	Część platformy webowej