Mis on Shadow DOM?

Shadow DOM — see on veebistandard, mis võimaldab inkapsuleerida DOM-puu ja stiile komponendi sees, isolatsiooniks neid ülejäänud dokumendist.

Peamised kontseptsioonid:

• Shadow tree: Oma DOM-puu, mis on ühendatud elemendiga.
• Shadow boundary: Piir, mis eraldab Shadow DOM-i põhidokumendist.
• Shadow host: Element, millele Shadow DOM on ühendatud.
• Shadow root: Shadow puu juurelõpp.

Eelised:

• Stiilide isolatsioon: Shadow DOM-i sees määratletud stiilid ei mõjuta selle väliseid elemente ja vastupidi.
• DOM-i isolatsioon: Shadow DOM-i sees olev DOM-struktuur ei ole nähtav ega otseselt kättesaadav põhidokumendist, mis takistab ID ja klasside konflikte.
• Kapseldus: loob moodul- ja korduvkasutatavaid komponente.

Shadow DOM-i loomine:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // režiim: 'open' - kättesaadav JavaScripti kaudu; 'closed' - mitte

shadowRoot.innerHTML = `
  <style>
    /* Selle Shadow DOM stiilid */
    p {
      color: blue;
    }
  </style>
  <p>See on Shadow DOM sisu</p>
`;