`Element.attachShadow / setHTMLUnsafe` în JavaScript

Pagina web (DOM) Browserele moderne (setHTMLUnsafe: din 2024)

Creează un Shadow DOM: o zonă izolată, cu HTML și CSS proprii, folosită de componentele web.

Sintaxă

const radacina = element.attachShadow({ mode: "open" });
element.setHTMLUnsafe(html)

Ce face `Element.attachShadow / setHTMLUnsafe`

attachShadow atașează elementului o rădăcină umbră (shadow root). Ce pui în ea este afișat în locul conținutului obișnuit, iar stilurile din interior nu ies în pagină și nici cele din pagină nu intră. Cu mode: "open", rădăcina este accesibilă prin element.shadowRoot.

setHTMLUnsafe(html) funcționează ca innerHTML, dar înțelege și Shadow DOM declarativ (<template shadowrootmode="open">). Ca și innerHTML, nu curăță HTML-ul periculos: nu-i da texte de la utilizatori.

Parametri

Parametru	Descriere
`optiuni`	Pentru attachShadow: `{ mode: "open" }` sau `"closed"`.

Ce returnează

attachShadow: un ShadowRoot. setHTMLUnsafe: undefined.

Exemple

Exemplul 1: O componentă cu stil izolat

document.querySelector nu vede elementele din Shadow DOM.

class EtichetaPret extends HTMLElement {
  connectedCallback() {
    const umbra = this.attachShadow({ mode: "open" });
    umbra.innerHTML = `
      <style>span { color: white; background: crimson; padding: 2px 6px; }</style>
      <span>${this.getAttribute("valoare")} lei</span>`;
  }
}
customElements.define("eticheta-pret", EtichetaPret);

document.body.insertAdjacentHTML("beforeend", '<eticheta-pret valoare="99"></eticheta-pret>');
const el = document.querySelector("eticheta-pret");
console.log(el.shadowRoot.querySelector("span").textContent, document.querySelector("span"));

Rezultat în browser

99 lei null

Exemplul 2: Shadow DOM declarativ cu setHTMLUnsafe

const gazda = document.createElement("div");
gazda.setHTMLUnsafe('<template shadowrootmode="open"><b>din umbră</b></template>');
console.log(gazda.shadowRoot.innerHTML);