Kas ir Shadow DOM?

Shadow DOM ir ir standarts, kas ļauj inkapsulēt HTML, CSS un JavaScript atsevišķos, izolētās blokos no galddokumenta.

Galvenās koncepcijas:

• Shadow Host: DOM elements, pie kura ir pievienots Shadow DOM.
• Shadow Tree: Izolēta DOM koka daļa.
• Shadow Boundary: Robeža starp Shadow DOM un galddokumentu.
• Shadow Root: Shadow Tree saknes mezgls, kas tiek izveidots ar element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root ir pieejams ārpusē caur element.shadowRoot.
  • closed: Shadow Root nav pieejams ārpusē.

Priekšrocības:

• Stilu inkapsulācija: Shadow DOM definētie stili neizplūst ārā un neietekmē galddokumentu. Galddokumenta stili parasti neietekmē Shadow DOM, bet to var kontrolēt.
• DOM inkapsulācija: Elementi Shadow DOM iekšpusē nav redzami galddokumenta kokā, kas novērš nejaušu selektoru pārklāšanos un manipulācijas.
• Uzvedības inkapsulācija: Logika un notikumu apstrādātāji var būt izolēti Shadow DOM.

Piemērs:

// Izveido jaunu DIV elementu
const hostElement = document.createElement('div');
// Pievieno Shadow DOM elementam
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Pievieno saturu Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Stils, kas attiecas tikai uz šo Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Šis ir teksts Shadow DOM iekšienē</p>
`;

// Pievieno host elementu galddokumentam
document.body.appendChild(hostElement);

Lietošana:

• Izveidot atkārtoti lietojamas web komponentes.
• Izolēt trešo pušu bibliotēku stilus.
• Aizsargāt komponenta iekšējos datus no ārējām iejaukšanās.

Stilu darba īpatnības:

• Ārējie stili parasti neietekmē Shadow DOM.
• Var izmantot pseido-klasi :host Shadow Host stilizēšanai iekšienē.
• Var izmantot :host-context() konteksta stilizēšanai.
• Var izmantot pseido-elementu ::slotted() elementu stilizēšanai, kas ievietoti slotos (<slot>).

<my-component>
  <!-- Šis elements tiks "nosūtīts" uz Shadow DOM slotu -->
  <span>Slot saturs</span>
</my-component>

// Shadow DOM iekšienē my-component komponentā
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Stils elementam, ievietotam slotā ar nosaukumu "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Galvenais komponenta saturs</div>
  <slot></slot> <!-- Šeit tiks rādīts slot saturs -->
`;

Shadow DOM ir Web Components specifikācijas daļa.