Jakie są różnice między shadow DOM, virtual DOM a zwykłym DOM?

Shadow DOM:

• enkapsulacja: Tworzy oddzielne, izolowane drzewo DOM wewnątrz głównego dokumentu. Style i skrypty wewnątrz Shadow DOM domyślnie nie wpływają na główny dokument i odwrotnie.
• scope: Idealny do tworzenia wielokrotnego użytku, niezależnych komponentów (np. komponenty webowe).
• rendering: Przeglądarka renderuje Shadow DOM bezpośrednio.

Virtual DOM:

• abstrakcja: Reprezentuje DOM w postaci obiektów JavaScript w pamięci.
• diffing i patching: Używany przez frameworki (np. React) do optymalizacji aktualizacji. Gdy stan się zmienia, framework tworzy nową wersję Virtual DOM, porównuje ją z poprzednią (diffing) i stosuje tylko niezbędne zmiany do rzeczywistego DOM (patching).
• wydajność: Poprawia wydajność przy częstych aktualizacjach DOM, minimalizując bezpośrednią interakcję z API przeglądarki.
• nie jest funkcją przeglądarki: To koncepcja zaimplementowana na poziomie JavaScript, a nie natywna funkcja przeglądarki.

Zwykły DOM (Document Object Model):

• reprezentacja: Reprezentuje drzewo węzłów (elementów, atrybutów, tekstu), odpowiadające strukturze dokumentu HTML.
• API: Udostępnia API do dostępu i manipulacji strukturą i zawartością dokumentu.
• rendering: Przeglądarka renderuje rzeczywisty DOM.
• bezpośrednia manipulacja: Zmiany są dokonywane bezpośrednio na rzeczywistym DOM, co może być wolne przy wielu aktualizacjach.

Tabela podsumowująca:

Cecha	Shadow DOM	Virtual DOM	Zwykły DOM
Cel	Kapsułkowanie komponentów	Optymalizacja aktualizacji DOM	Reprezentacja struktury HTML
Natura	Funkcjonalność natywna przeglądarki	Koncepcja zaimplementowana w JS	Struktura natywna przeglądarki
Izolacja	Tak, na poziomie DOM i CSS	Nie, to tylko reprezentacja	Nie
Interakcja	Bezpośrednia interakcja przeglądarki	Najpierw diffing/patching, potem DOM	Bezpośrednia interakcja przeglądarki
Użycie	Komponenty webowe	Frameworki (React, Vue itd.)	Podstawowe API webowe