Ποια είναι η διαφορά μεταξύ Shadow DOM, Virtual DOM…

Το DOM (Document Object Model) είναι ένα API για έγγραφα HTML και XML. Αντιπροσωπεύει ένα δέντρο κόμβων, όπου κάθε κόμβος αντιστοιχεί σε ένα στοιχείο, χαρακτηριστικό ή τμήμα κειμένου του εγγράφου. Χρησιμοποιείται για την πρόσβαση και την τροποποίηση της δομής, των στυλ και του περιεχομένου των ιστοσελίδων. Οι άμεσες τροποποιήσεις του DOM μπορεί να είναι αργές λόγω της ανάγκης επαναυπολογισμού των στυλ, της διάταξης και της ανακατασκευής.

Το Virtual DOM είναι μια έννοια που χρησιμοποιείται σε frameworks όπως το React ή το Vue. Είναι μια αναπαράσταση του δέντρου DOM που αποθηκεύεται στη μνήμη. Όταν αλλάζουν τα δεδομένα του συστατικού, το framework δημιουργεί ένα νέο εικονικό δέντρο DOM. Στη συνέχεια, το συγκρίνει με το προηγούμενο εικονικό δέντρο (diffing) και καθορίζει το ελάχιστο σύνολο αλλαγών που πρέπει να εφαρμοστούν στο πραγματικό DOM. Αυτό βελτιστοποιεί την ενημέρωση της σελίδας, ελαχιστοποιώντας τις δαπανηρές λειτουργίες με το πραγματικό DOM.

Το Shadow DOM είναι ένα πρότυπο ιστού που επιτρέπει την ενθυλάκωση της δομής, των στυλ και της συμπεριφοράς ενός συστατικού. Δημιουργεί ένα κρυφό "σκιώδες" δέντρο DOM, συνδεδεμένο με ένα στοιχείο στο κανονικό DOM (host element). Το περιεχόμενο του Shadow DOM είναι απομονωμένο από το υπόλοιπο έγγραφο: τα στυλ μέσα σε αυτό δεν επηρεάζουν τον εξωτερικό κόσμο, και το αντίστροφο. Αυτό είναι χρήσιμο για τη δημιουργία επαναχρησιμοποιήσιμων, απομονωμένων συστατικών, όπως <video> ή <input type="range">.

Βασικές διαφορές:

Χαρακτηριστικό	Κανονικό DOM	Virtual DOM	Shadow DOM
Αντιπροσώπευση	Πραγματικό δέντρο εγγράφου API	Ελαφρύ αντίγραφο του DOM στη μνήμη	Κρυφό "σκιώδες" δέντρο DOM
Σκοπός	API για πρόσβαση και τροποποίηση του εγγράφου	Βελτιστοποίηση ενημερώσεων DOM	Ενθυλάκωση συστατικών
Manipulations	Άμεσες	Έμμεσες (μέσω σύγκρισης εκδόσεων)	Άμεσες, αλλά μόνο μέσα στο "σκιώδες"
Απομόνωση στυλ	Όχι	Όχι (εκτός αν χρησιμοποιείται CSS-in-JS ή modules)	Ναι
Πρότυπο	Μέρος της πλατφόρμας ιστού	Έννοια των frameworks	Μέρος της πλατφόρμας ιστού

Ποια είναι η διαφορά μεταξύ Shadow DOM, Virtual DOM και κανονικού DOM;