HTMLTemplateElement.shadowRootClonable — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTemplateElement.shadowRootClonable

Beschreibung

shadowRootClonable ist eine lesbare und schreibbare boolesche Eigenschaft von HTMLTemplateElement. Sie spiegelt das HTML-Attribut shadowrootclonable wider: true heißt, dass das Attribut vorhanden ist. Wenn Sie true zuweisen, wird ein leeres Attribut shadowrootclonable="" gesetzt. Bei false wird es entfernt.

Das Attribut ist nur im Zusammenhang mit deklarativem Shadow DOM von Bedeutung, also bei einem <template> mit dem Attribut shadowrootmode="open" oder "closed". Der Parser erzeugt aus einem solchen Template einen Shadow Root am Elternelement. Ist shadowrootclonable gesetzt, wird die Eigenschaft ShadowRoot.clonable dieses Shadow Roots auf true gesetzt. Dann kopiert Node.cloneNode() bzw. Document.importNode() beim Klonen des Host-Elements auch den Shadow Root mit seinem Inhalt.

Ohne das Attribut ist ein deklarativer Shadow Root nicht klonbar: Ein Klon des Host-Elements hat dann keinen Shadow Root. Bei Shadow Roots, die per Skript erzeugt werden, heißt die entsprechende Option clonable in Element.attachShadow().

Rückgabewert

Typ

boolean

Beschreibung

true, wenn das Attribut shadowrootclonable vorhanden ist, sonst false. Beim Zuweisen wird das Attribut gesetzt bzw. entfernt.

Beispiele

Eigenschaft lesen und setzen (Attribut-Spiegelung)

const tpl = document.createElement('template');
console.log(tpl.shadowRootClonable); // false

tpl.shadowRootMode = 'open';
tpl.shadowRootClonable = true;

console.log(tpl.shadowRootClonable);                 // true
console.log(tpl.getAttribute('shadowrootclonable')); // "" (leeres Attribut)
console.log(tpl.outerHTML);

tpl.shadowRootClonable = false;
console.log(tpl.hasAttribute('shadowrootclonable')); // false

false true <template shadowrootmode="open" shadowrootclonable=""></template> false

Deklarativen Shadow Root per setHTMLUnsafe() erzeugen und klonen

const host = document.createElement('div');

// innerHTML verarbeitet deklaratives Shadow DOM NICHT – setHTMLUnsafe() schon
host.setHTMLUnsafe(`
  <my-card>
    <template shadowrootmode="open" shadowrootclonable>
      <style>p { color: teal; }</style>
      <p>Hallo aus dem Shadow DOM</p>
    </template>
  </my-card>
`);

const card = host.querySelector('my-card');
console.log(card.shadowRoot.clonable); // true

const copy = card.cloneNode(true);
console.log(copy.shadowRoot !== null);                     // true
console.log(copy.shadowRoot.querySelector('p').textContent);

true true Hallo aus dem Shadow DOM

Vergleich: ohne shadowrootclonable geht der Shadow Root beim Klonen verloren

const wrapper = document.createElement('div');
wrapper.setHTMLUnsafe(`
  <section>
    <template shadowrootmode="open">
      <slot></slot>
    </template>
    Inhalt
  </section>
`);

const section = wrapper.querySelector('section');
console.log(section.shadowRoot.clonable); // false

const clone = section.cloneNode(true);
console.log(clone.shadowRoot); // null – nur Light DOM wurde kopiert

// Imperatives Gegenstück:
const el = document.createElement('div');
el.attachShadow({ mode: 'open', clonable: true });
console.log(el.cloneNode().shadowRoot !== null); // true

false null true

// Wichtig · Fallstricke

Wirkt nur beim Parsen: Deklaratives Shadow DOM wird nur verarbeitet, wenn der HTML-Parser das Template liest, also beim ersten Laden der Seite, mit Element.setHTMLUnsafe() oder mit Document.parseHTMLUnsafe(). Wenn Sie shadowRootClonable an einem Template ändern, das schon im DOM steht, entsteht kein Shadow Root und ein vorhandener ändert sich nicht.
innerHTML und DOMParser werten shadowrootmode standardmäßig nicht aus. Das Template bleibt dann ein normales <template>-Element.
Nach dem Parsen ist das <template>-Element nicht mehr im DOM. Den Zustand fragen Sie deshalb über element.shadowRoot.clonable ab, nicht über das Template.
Ohne shadowrootmode hat das Attribut keine Wirkung.
Kompatibilität: Unterstützt in Chrome/Edge ab 124, Firefox ab 123 und Safari ab 17.4. Ältere Browser ignorieren das Attribut, deklarative Shadow Roots sind dort nicht klonbar. Bei Bedarf können Sie das per 'shadowRootClonable' in HTMLTemplateElement.prototype prüfen.

Siehe auch

HTMLTemplateElement.shadowRootMode HTMLTemplateElement.shadowRootSerializable HTMLTemplateElement.shadowRootSlotAssignment HTMLTemplateElement.shadowRootDelegatesFocus HTMLTemplateElement.content