Каква е разликата между Shadow DOM, Virtual DOM и обикновения DOM?

DOM (Document Object Model) е API за HTML и XML документи. Представлява дърво от възли, където всеки възел съответства на елемент, атрибут или текстов фрагмент на документа. Използва се за достъп и манипулиране на структурата, стиловете и съдържанието на уеб страниците. Директните манипулации с DOM могат да бъдат бавни поради необходимостта от пресмятане на стилове, оформление и повторно рисуване.

Virtual DOM е концепция, използвана във фреймуъркове като React или Vue. Това е представяне на дървото DOM, което се съхранява в паметта. Когато данните на компонента се променят, фреймуъркът създава ново виртуално дърво DOM. След това го сравнява с предишното (diffing) и определя минималния набор от промени, които трябва да бъдат приложени към реалния DOM. Това оптимизира актуализацията на страницата, минимизирайки скъпите операции с реалния DOM.

Shadow DOM е уеб стандарт, който позволява инкапсулация на структурата, стиловете и поведението на компонент. Той създава скрито "сянка" дърво DOM, свързано с елемент в обикновения DOM (хост-елемент). Съдържанието на Shadow DOM е изолирано от останалата част на документа: стиловете вътре в него не влияят на външния свят и обратно. Това е полезно за създаване на повторно използваеми, изолирани компоненти, като <video> или <input type="range">.

Основни разлики:

Характеристика	Обикновен DOM	Virtual DOM	Shadow DOM
Представяне	Реално дърво на документа API	Лек представител на DOM в паметта	Инкапсулирано дърво DOM
Назначение	API за достъп и промяна на документа	Оптимизация на актуализациите на DOM	Инкапсулация на компоненти
Манипулации	Директни	Индиректни (чрез сравнение на версии)	Директни, но само вътре в "сянката"
Изолация на стилове	Не	Не (ако не се използва CSS-in-JS или модули)	Има
Стандарт	Част от уеб платформата	Концепция на фреймуъркове	Част от уеб платформата