Τι είναι το Shadow DOM;

Το Shadow DOM είναι ένα πρότυπο ιστού που επιτρέπει την ενσωμάτωση του DOM και του CSS μέσα σε ένα συστατικό. Δημιουργεί ένα ξεχωριστό, απομονωμένο δέντρο DOM, που ονομάζεται "shadow tree", το οποίο συνδέεται με ένα στοιχείο στο κύριο έγγραφο, που ονομάζεται "shadow root".

Πλεονεκτήματα του Shadow DOM:

• Απομόνωση CSS: Τα στυλ που ορίζονται μέσα στο Shadow DOM δεν "διαφεύγουν" προς τα έξω, επηρεάζοντας το κύριο έγγραφο, και κατά προεπιλογή, τα στυλ από το κύριο έγγραφο δεν επηρεάζουν το Shadow DOM.
• Απομόνωση DOM: Η δομή του Shadow DOM είναι κρυμμένη από το κύριο έγγραφο και δεν είναι προσβάσιμη μέσω τυπικών μεθόδων επιλογής (π.χ., querySelector).
• Απομόνωση JavaScript: Τα scripts που εκτελούνται στο κύριο έγγραφο δεν μπορούν εύκολα να έχουν πρόσβαση στα στοιχεία μέσα στο Shadow DOM.
• Επαναχρησιμοποίηση: Τα συστατικά που δημιουργούνται με Shadow DOM μπορούν εύκολα να χρησιμοποιηθούν σε άλλα μέρη της εφαρμογής ή ακόμα και σε άλλες ιστοσελίδες.

Δημιουργία Shadow DOM:

// Λαμβάνουμε το στοιχείο στο οποίο θέλουμε να προσθέσουμε το Shadow DOM
const hostElement = document.getElementById('my-component');

// Δημιουργούμε Shadow Root
// Το 'open' καθιστά το Shadow DOM προσβάσιμο από έξω μέσω του hostElement.shadowRoot
// Το 'closed' κρύβει το Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Προσθέτουμε στοιχεία μέσα στο Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Στυλ που είναι συγκεκριμένα για αυτό το συστατικό */
    h2 {
      color: blue;
    }
  </style>
  <h2>Τίτλος μέσα στο συστατικό</h2>
  <p>Παράγραφος μέσα στο συστατικό.</p>
`;

Χαρακτηριστικά:

• Slots: Επιτρέπουν την εισαγωγή εξωτερικού περιεχομένου σε συγκεκριμένα σημεία μέσα στο Shadow DOM.
• Shadow Parts: Επιτρέπουν το στυλ ορισμένων στοιχείων μέσα στο Shadow DOM από έξω.

Το Shadow DOM αποτελεί βασικό συστατικό για τη δημιουργία web components, παρέχοντας ισχυρή ενσωμάτωση, απαραίτητη για τη δημιουργία επαναχρησιμοποιήσιμων και αυτοτελών στοιχείων UI.