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

Shadow DOM — είναι ένα πρότυπο ιστού που επιτρέπει την ενσωμάτωση του δέντρου DOM και των στυλ μέσα σε ένα συστατικό, απομονώνοντάς τα από το υπόλοιπο έγγραφο.

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

• Shadow tree: Ιδιωτικό δέντρο DOM, συνδεδεμένο με ένα στοιχείο.
• Shadow boundary: Όριο που διαχωρίζει το Shadow DOM από το κύριο έγγραφο.
• Shadow host: Στοιχείο στο οποίο προσαρτάται το Shadow DOM.
• Shadow root: Κόμβος ρίζας του Shadow tree.

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

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

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

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // λειτουργία: 'open' - προσβάσιμο μέσω JavaScript; 'closed' - όχι

shadowRoot.innerHTML = `
  <style>
    /* Στυλ μόνο για αυτό το Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Αυτό είναι το περιεχόμενο του Shadow DOM</p>
`;