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

Shadow DOM είναι ένα πρότυπο ιστού που επιτρέπει την ενθυλάκωση HTML, CSS και JavaScript σε ξεχωριστά, απομονωμένα μπλοκ από το κύριο έγγραφο.

Βασικές έννοιες:

• Shadow Host: Το στοιχείο DOM στο οποίο εφαρμόζεται το Shadow DOM.
• Shadow Tree: Απομονωμένο δέντρο DOM.
• Shadow Boundary: Τα όρια μεταξύ Shadow DOM και του κύριου εγγράφου.
• Shadow Root: Ο κόμβος ρίζας του Shadow Tree. Δημιουργείται με element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Το Shadow Root είναι προσβάσιμο από έξω μέσω element.shadowRoot.
  • closed: Το Shadow Root δεν είναι προσβάσιμο από έξω.

Πλεονεκτήματα:

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

Παράδειγμα δημιουργίας Shadow DOM:

// Δημιουργία ενός νέου στοιχείου DIV
const hostElement = document.createElement('div');
// Προσάρτηση Shadow DOM στο στοιχείο
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

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

// Προσθήκη του στοιχείου-υποδοχέα στο κύριο έγγραφο
document.body.appendChild(hostElement);

Εφαρμογές:

• Δημιουργία επαναχρησιμοποιήσιμων web components.
• Απομόνωση στυλ εξωτερικών βιβλιοθηκών.
• Προστασία των εσωτερικών λεπτομερειών του component από εξωτερικές παρεμβάσεις.

Χαρακτηριστικά κατά την εργασία με στυλ:

• Τα εξωτερικά στυλ, από προεπιλογή, δεν επηρεάζουν το Shadow DOM.
• Μπορεί να χρησιμοποιηθεί η :host ψευδο-κλάση για να στιλιζάρετε το Shadow Host από μέσα στο Shadow DOM.
• Μπορεί να χρησιμοποιηθεί η :host-context() για να στιλιζάρετε με βάση το πλαίσιο του Shadow Host.
• Μπορεί να χρησιμοποιηθεί το ψευδο-στοιχείο ::slotted() για να στιλιζάρετε στοιχεία που τοποθετούνται σε slots (<slot>).

<my-component>
  <!-- Αυτό το στοιχείο θα "σταλεί" σε slot μέσα στο Shadow DOM -->
  <span>Περιεχόμενο slot</span>
</my-component>

// Μέσα στο Shadow DOM του my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Στυλ για το στοιχείο που τοποθετείται σε slot με όνομα "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Κύριο περιεχόμενο του component</div>
  <slot></slot> <!-- Εδώ θα εμφανιστεί το περιεχόμενο του slot -->
`;

Το Shadow DOM αποτελεί μέρος της προδιαγραφής Web Components.