Ce este Shadow DOM?

Shadow DOM este un standard web care permite încapsularea HTML, CSS și JavaScript în blocuri separate și izolate de documentul principal.

Concepte principale:

• Shadow Host: Elementul DOM la care se atașează Shadow DOM.
• Shadow Tree: Arbore DOM izolat.
• Shadow Boundary: Granița dintre Shadow DOM și documentul principal.
• Shadow Root: Nodul rădăcină al Shadow Tree. Creat cu element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root este accesibil din exterior prin element.shadowRoot.
  • closed: Shadow Root nu este accesibil din exterior.

Avantaje:

• Încapsularea stilurilor: Stilurile definite în Shadow DOM nu se scurg în exterior și nu afectează documentul principal. Stilurile din documentul principal, în mod implicit, nu afectează Shadow DOM, dar acest lucru poate fi controlat.
• Încapsularea DOM: Elementele din interiorul Shadow DOM nu sunt vizibile în arborele DOM principal, ceea ce previne suprapunerea accidentală a selectorilor și manipulărilor.
• Încapsularea comportamentului: Logica și handlerii de evenimente pot fi izolați în Shadow DOM.

Exemplu de creare a Shadow DOM:

// Creăm un nou element DIV
const hostElement = document.createElement('div');
// Atașăm Shadow DOM la element
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Adăugăm conținut în Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Stil aplicabil doar în interiorul acestui Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Acesta este un text în interiorul Shadow DOM</p>
`;

// Adăugăm elementul gazdă în documentul principal
document.body.appendChild(hostElement);

Aplicații:

• Crearea de componente web reutilizabile.
• Izolarea stilurilor bibliotecilor externe.
• Protejarea detaliilor interne ale componentei de intervenții externe.

Caracteristici la lucrul cu stilurile:

• Stilurile externe, în mod implicit, nu afectează Shadow DOM.
• Se poate folosi :host pentru a stiliza Shadow Host din interiorul Shadow DOM.
• Se poate folosi :host-context() pentru a stiliza în funcție de contextul Shadow Host.
• Se poate folosi pseudo-elementul ::slotted() pentru a stiliza elementele plasate în sloturi (<slot>).

<my-component>
  <!-- Acest element va fi "trimis" în slotul din interiorul Shadow DOM -->
  <span>Conținutul slotului</span>
</my-component>

// În interiorul Shadow DOM al componentului my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Stil pentru elementul plasat în slot cu numele "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Conținutul principal al componentului</div>
  <slot></slot> <!-- Aici va fi afișat conținutul slotului -->
`;

Shadow DOM face parte din specificația Web Components.