ShadowRoot

Instanzeigenschaften

ShadowRoot.activeElement Schreibgeschützt

Gibt das Element innerhalb des Shadow Tree zurück, das den Fokus besitzt.

ShadowRoot.adoptedStyleSheets

Fügt ein Array konstruierter Stylesheets hinzu, die vom Shadow-DOM-Teilbaum verwendet werden sollen. Diese können mit anderen DOM-Teilbäumen, die denselben übergeordneten Document-Knoten verwenden, sowie mit dem Dokument selbst geteilt werden.

ShadowRoot.clonable Schreibgeschützt

Ein boolescher Wert, der angibt, ob der Shadow Root klonbar ist.

ShadowRoot.customElementRegistry Schreibgeschützt

Gibt das diesem Shadow Root zugeordnete CustomElementRegistry-Objekt zurück oder null, wenn keines festgelegt wurde.

ShadowRoot.delegatesFocus Schreibgeschützt

Ein boolescher Wert, der angibt, ob der Shadow Root den Fokus delegiert, wenn ein nicht fokussierbarer Knoten ausgewählt wird.

ShadowRoot.fullscreenElement Schreibgeschützt

Das Element, das sich derzeit für diesen Shadow Tree im Vollbildmodus befindet.

ShadowRoot.host Schreibgeschützt

Gibt eine Referenz auf das DOM-Element zurück, an das das ShadowRoot angehängt ist.

ShadowRoot.innerHTML

Legt eine Referenz auf den DOM-Baum innerhalb des ShadowRoot fest oder gibt sie zurück.

ShadowRoot.mode Schreibgeschützt

Der Modus des ShadowRoot, entweder open oder closed. Dies definiert, ob die internen Funktionen des Shadow Root über JavaScript zugänglich sind oder nicht.

ShadowRoot.pictureInPictureElement Schreibgeschützt

Gibt das Element innerhalb des Shadow Tree zurück, das derzeit im Bild-im-Bild-Modus präsentiert wird.

ShadowRoot.pointerLockElement Schreibgeschützt

Gibt das Element zurück, das als Ziel für Mausereignisse festgelegt ist, während der Zeiger gesperrt ist. null, wenn die Sperrung aussteht, der Zeiger nicht gesperrt ist oder sich das Ziel in einem anderen Baum befindet.

ShadowRoot.referenceTarget

Ein Zeichenfolgenwert, der null sein kann und das wirksame Ziel jeder Elementreferenz angibt, die von außerhalb des Host-Elements gegen den Shadow Host erfolgt. Der Wert sollte die ID eines Elements innerhalb des Shadow DOM sein. Wenn er festgelegt ist, bewirken Zielreferenzen auf das Host-Element von außerhalb des Shadow DOM, dass das referenzierte Zielelement zum wirksamen Ziel der Referenz auf das Host-Element wird.

ShadowRoot.serializable Schreibgeschützt

Ein boolescher Wert, der angibt, ob der Shadow Root serialisierbar ist. Ein serialisierbarer Shadow Root innerhalb eines Elements wird durch Element.getHTML() oder ShadowRoot.getHTML() serialisiert, wenn der Parameter options.serializableShadowRoots auf true gesetzt ist. Dies wird beim Erstellen des Shadow Root festgelegt.

ShadowRoot.slotAssignment Schreibgeschützt

Gibt eine Zeichenfolge zurück, die den Typ der Slot-Zuweisung enthält, entweder manual oder named.

ShadowRoot.styleSheets Schreibgeschützt

Gibt eine StyleSheetList von CSSStyleSheet-Objekten für Stylesheets zurück, die explizit in einen Shadow Tree eingebunden oder darin eingebettet sind.

Instanzmethoden

ShadowRoot.getAnimations()

Gibt ein Array aller derzeit wirksamen Animation-Objekte zurück, deren Zielelemente Nachfahren des Shadow Tree sind.

ShadowRoot.getSelection()

Gibt ein Selection-Objekt zurück, das den vom Benutzer ausgewählten Textbereich oder die aktuelle Position der Einfügemarke darstellt.

ShadowRoot.elementFromPoint()

Gibt das oberste Element an den angegebenen Koordinaten zurück.

ShadowRoot.elementsFromPoint()

Gibt ein Array aller Elemente an den angegebenen Koordinaten zurück.

ShadowRoot.setHTML()

Stellt eine XSS-sichere Methode bereit, um eine HTML-Zeichenfolge in ein DocumentFragment zu parsen und zu bereinigen, das anschließend den vorhandenen Baum im Shadow DOM ersetzt.

ShadowRoot.setHTMLUnsafe()

Parst eine HTML-Zeichenfolge ohne Bereinigung in ein Dokumentfragment, das anschließend den ursprünglichen Teilbaum des Shadow Root ersetzt. Die HTML-Zeichenfolge kann deklarative Shadow Roots enthalten, die als Template-Elemente geparst würden, wenn das HTML mit ShadowRoot.innerHTML gesetzt worden wäre.

Ereignisse

Die folgenden Ereignisse stehen ShadowRoot über Event Bubbling von HTMLSlotElement zur Verfügung:

HTMLSlotElement-Ereignis slotchange

Ein Ereignis, das ausgelöst wird, wenn sich die in diesem Slot enthaltenen Knoten ändern.

Beispiele

Die folgenden Ausschnitte stammen aus unserem Beispiel life-cycle-callbacks (auch live ansehen), das ein Element erstellt, das ein Quadrat mit einer Größe und Farbe anzeigt, die in den Attributen des Elements angegeben sind.

Innerhalb der Klassendefinition des Elements <custom-square> fügen wir einige Lebenszyklus-Callbacks ein, die eine externe Funktion, updateStyle(), aufrufen, welche die Größe und Farbe tatsächlich auf das Element anwendet. Sie sehen, dass wir ihr this (das Custom Element selbst) als Parameter übergeben.

class Square extends HTMLElement {
  // …
  connectedCallback() {
    console.log("Custom square element added to page.");
    updateStyle(this);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log("Custom square element attributes changed.");
    updateStyle(this);
  }
  // …
}

In der Funktion updateStyle() selbst erhalten wir über Element.shadowRoot eine Referenz auf das Shadow DOM. Von dort aus verwenden wir Standardtechniken zur DOM-Traversierung, um das <style>-Element innerhalb des Shadow DOM zu finden und anschließend das darin enthaltene CSS zu aktualisieren:

function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  const childNodes = shadow.childNodes;
  for (const node of childNodes) {
    if (node.nodeName === "STYLE") {
      node.textContent = `
div {
  width: ${elem.getAttribute("l")}px;
  height: ${elem.getAttribute("l")}px;
  background-color: ${elem.getAttribute("c")};
}
      `;
    }
  }
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwenden des Shadow DOM
• Web Components