Mis on Shadow DOM?

Shadow DOM on veebistandard, mis võimaldab inkapsuleerida HTML-i, CSS-i ja JavaScripti eraldi, isoleeritud plokkidena peamise dokumendi seest.

Peamised kontseptsioonid:

• Shadow Host: DOM element, millele on ühendatud Shadow DOM.
• Shadow Tree: Isoleeritud DOM puu.
• Shadow Boundary: Piir Shadow DOM-i ja peamise dokumendi vahel.
• Shadow Root: Shadow Tree juureleht, mis luuakse element.attachShadow({ mode: 'open' | 'closed' }) abil:
  • open: Shadow Root on väljast kättesaadav element.shadowRoot kaudu.
  • closed: Shadow Root ei ole väljast kättesaadav.

Eelised:

• Stiilide inkapsulatsioon: Shadow DOM-is määratletud stiilid ei levi välja ja ei mõjuta peamist dokumenti. Peamise dokumendi stiilid tavaliselt Shadow DOM-i ei mõjuta, kuid seda saab kontrollida.
• DOM inkapsulatsioon: Shadow DOM-i elemendid ei ole nähtavad peamise DOM-i puus, mis takistab juhuslikku kattumist ja manipuleerimist.
• Käitumise inkapsulatsioon: Loogika ja sündmuste töötlejad võivad olla isoleeritud Shadow DOM-is.

Näide:

// Loome uue DIV elemendi
const hostElement = document.createElement('div');
// Lisame Shadow DOM-i elemendile
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Lisame Shadow DOM-i sisu
shadowRoot.innerHTML = `
  <style>
    /* Stiil, mis kehtib ainult selle Shadow DOM-i sees */
    p {
      color: blue;
    }
  </style>
  <p>See on tekst Shadow DOM-i sees</p>
`;

// Lisame host-elemendi peamisele dokumendile
document.body.appendChild(hostElement);

Kasutamine:

• Taaskasutatavate veebikomponentide loomine.
• Kolmanda osapoole teekide stiilide isolatsioon.
• Komponendi sisemiste detailide kaitse väliste sekkumiste eest.

Stiilidega töötamise eripära:

• Välised stiilid tavaliselt Shadow DOM-i ei mõjuta.
• Võib kasutada pseudo-klassi :host Shadow Host-i stiilimiseks seestpoolt.
• Võib kasutada :host-context() kontekstipõhiseks stiilimiseks.
• Võib kasutada pseudo-elementi ::slotted() elementide stiilimiseks, mis on paigutatud slotidesse (<slot>).

<my-component>
  <!-- See element saadetakse Shadow DOM-i sloti -->
  <span>Sloti sisu</span>
</my-component>

// Shadow DOM-i sees my-component komponendis
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Stiil elemendile, mis on paigutatud sloti nimega "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Peamine komponendi sisu</div>
  <slot></slot> <!-- Siin kuvatakse sloti sisu -->
`;

Shadow DOM on osa Web Components spetsifikatsioonist.