ShadowRoot

Instanz-Eigenschaften

ShadowRoot.activeElement Schreibgeschützt

Gibt das Element im Shadow-Baum zurück, das den Fokus hat.

ShadowRoot.adoptedStyleSheets

Fügt dem Shadow-DOM-Teilbaum ein Array von konstruierten Stylesheets hinzu. Diese können mit anderen DOM-Teilbäumen, die denselben übergeordneten Document-Knoten und das Dokument selbst teilen, gemeinsam genutzt werden.

ShadowRoot.clonable Schreibgeschützt

Ein Boolean-Wert, der angibt, ob der Shadow-Root klonbar ist.

ShadowRoot.delegatesFocus Schreibgeschützt

Ein Boolean-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 im Vollbildmodus für diesen Shadow-Baum befindet.

ShadowRoot.host Schreibgeschützt

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

ShadowRoot.innerHTML

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

ShadowRoot.mode Schreibgeschützt

Der Modus des ShadowRoot, entweder open oder closed. Dies definiert, ob die internen Funktionen des Shadow-Roots von JavaScript aus zugänglich sind oder nicht.

ShadowRoot.pictureInPictureElement Schreibgeschützt

Gibt das Element im Shadow-Baum zurück, das derzeit im Bild-im-Bild-Modus angezeigt wird.

ShadowRoot.pointerLockElement Schreibgeschützt

Gibt das Element zurück, das als Ziel für Mausereignisse gesetzt ist, während der Zeiger gesperrt ist. null, wenn die Sperre aussteht, der Zeiger entsperrt ist oder wenn das Ziel in einem anderen Baum liegt.

ShadowRoot.referenceTarget Schreibgeschützt Experimentell Nicht standardisiert

Ein Zeichenfolgenwert, der das effektive Ziel eines jeden Elementverweises von außerhalb des Host-Elements auf den Shadow-Host angibt. Der Wert sollte die ID eines Elements innerhalb des Shadow DOM sein. Wenn gesetzt, führen Zielverweise auf das Host-Element von außerhalb des Shadow DOM dazu, dass das referenzierte Ziel-Element das effektive Ziel des Verweises auf das Host-Element wird.

ShadowRoot.serializable Schreibgeschützt

Ein Boolean-Wert, der angibt, ob der Shadow-Root serialisierbar ist. Ein serialisierbarer Shadow-Root in einem Element wird durch Element.getHTML() oder ShadowRoot.getHTML() serialisiert, wenn dessen options.serializableShadowRoots-Parameter auf true gesetzt ist. Dies wird beim Erstellen des Shadow-Roots festgelegt.

ShadowRoot.slotAssignment Schreibgeschützt

Gibt einen Zeichenfolgenwert zurück, der 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-Baum verlinkt oder eingebettet sind.

Instanz-Methoden

ShadowRoot.getAnimations()

Gibt ein Array aller Animation-Objekte zurück, die derzeit in Wirkung sind und deren Ziel-Elemente Nachkommen des Shadow-Baums sind.

ShadowRoot.getSelection() Nicht standardisiert

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

ShadowRoot.elementFromPoint() Nicht standardisiert

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

ShadowRoot.elementsFromPoint() Nicht standardisiert

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

ShadowRoot.setHTML() Experimentell

Bietet eine XSS-sichere Methode, um eine Zeichenfolge von HTML in einen DocumentFragment zu parsen und zu bereinigen, der dann den bestehenden Baum im Shadow-DOM ersetzt.

ShadowRoot.setHTMLUnsafe()

Parst eine Zeichenfolge von HTML in einen Dokumenten-Fragment ohne Bereinigung, der dann den ursprünglichen Teilbaum des Shadowroots ersetzt. Die HTML-Zeichenfolge kann deklarative Shadow-Roots enthalten, die als Template-Elemente geparst würden, wenn das HTML mit ShadowRoot.innerHTML gesetzt wurde.

Ereignisse

Die folgenden Ereignisse sind für ShadowRoot über das Ereignis-Bubblen von HTMLSlotElement verfügbar:

HTMLSlotElement slotchange-Ereignis

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

Beispiele

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

Innerhalb der Klassendefinition des <custom-square>-Elements fügen wir einige Lebenszyklus-Callbacks ein, die einen Aufruf an eine externe Funktion, updateStyle(), machen, die tatsächlich die Größe und Farbe auf das Element anwendet. Sie werden sehen, dass wir ihm this (das benutzerdefinierte 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 updateStyle()-Funktion selbst erhalten wir eine Referenz auf das Shadow DOM mit Element.shadowRoot. Von hier aus verwenden wir standardmäßige DOM-Traversierungstechniken, um das <style>-Element im Shadow DOM zu finden und dann das darin gefundene 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

• Verwendung des Shadow DOM
• Web-Komponenten