Koje su razlike između shadow DOM, virtual DOM i običnog DOM-a?

Shadow DOM:

• enkapsulacija: Kreira odvojeno, izolovano DOM stablo unutar glavnog dokumenta. Stilovi i skripte unutar Shadow DOM po defaultu ne utiču na glavni dokument i obrnuto.
• scoping: Idealno za kreiranje ponovo upotrebljivih, nezavisnih komponenti (npr. web-komponenti).
• rendering: Pregledač direktno renderuje Shadow DOM.

Virtual DOM:

• apstrakcija: Predstavlja DOM u vidu JavaScript objekata u memoriji.
• diffing i patching: Koriste ga okviri (npr. React) za optimizaciju ažuriranja. Kada se promeni stanje, okvir pravi novu verziju Virtual DOM-a, poredi je sa prethodnom (diffing) i primenjuje samo potrebne izmene na pravi DOM (patching).
• performanse: Poboljšava performanse kod čestih ažuriranja DOM-a minimiziranjem direktne interakcije sa browser API-jem.
• nije funkcija pretraživača: Ovo je koncept implementiran na nivou JavaScript-a, a ne nativna mogućnost pretraživača.

Običan DOM (Document Object Model):

• reprezentacija: Predstavlja stablo čvorova (elementi, atributi, tekst), koje odgovara strukturi HTML dokumenta.
• API: Pruža API za pristup i manipulaciju strukturom i sadržajem dokumenta.
• rendering: Pregledač renderuje pravi DOM.
• direktna manipulacija: Promene se vrše direktno na pravom DOM-u, što može biti sporo kod velikog broja ažuriranja.

Tabela sažetka:

Osobina	Shadow DOM	Virtual DOM	Običan DOM
Svrha	Inkapsulacija komponenti	Optimizacija ažuriranja DOM-a	Predstavljanje HTML strukture
Priroda	Nativna mogućnost pretraživača	Koncept, implementiran u JS	Nativna struktura pretraživača
Izolacija	Da, na nivou DOM i CSS	Ne, ovo je prikaz	Ne
Interakcija	Direktna interakcija pretraživača	Prvo diffing/patching, zatim DOM	Direktna interakcija
Korišćenje	Web-komponente	Okviri (React, Vue itd.)	Osnovni web API