ShadowRoot

Instanzeigenschaften

ShadowRoot.activeElement Schreibgeschützt

Gibt das Element innerhalb des Shadow-Baums zurück, das den Fokus hat.

ShadowRoot.adoptedStyleSheets

Fügen Sie ein Array von konstruierten Stylesheets hinzu, die vom Shadow-DOM-Teilbaum genutzt werden sollen. Diese können mit anderen DOM-Teilbäumen geteilt werden, die denselben übergeordneten Document-Knoten teilen, sowie mit dem Dokument selbst.

ShadowRoot.clonable Schreibgeschützt

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

ShadowRoot.delegatesFocus Schreibgeschützt

Ein Boolean, der angibt, ob das 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 einen Verweis auf das DOM-Element zurück, an das das ShadowRoot angehängt ist.

ShadowRoot.innerHTML

Setzt oder gibt einen Verweis 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 innerhalb des Shadow-Baums 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 gesetzt ist, während der Zeiger gesperrt ist. null, wenn die Sperre aussteht, der Zeiger entsperrt ist oder das Ziel in einem anderen Baum liegt.

ShadowRoot.serializable Schreibgeschützt

Ein Boolean, der angibt, ob das Shadow-Root serialisierbar ist. Ein serialisierbares Shadow-Root innerhalb eines Elements wird von 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 String 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 oder in einem Shadow-Baum eingebettet sind.

Instanzmethoden

ShadowRoot.getAnimations()

Gibt ein Array aller Animation-Objekte zurück, die derzeit in Kraft sind und deren Zielelemente 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 einen String aus HTML zu parsen und zu bereinigen und ihn in ein DocumentFragment umzuwandeln, welches dann den bestehenden Baum im Shadow-DOM ersetzt.

ShadowRoot.setHTMLUnsafe()

Parsiert einen String aus HTML in ein Dokumentfragment, ohne Bereinigung, welches dann den ursprünglichen Teilbaum des Shadow-Roots ersetzt. Der HTML-String kann deklarative Shadow-Roots einschließen, die als Template-Elemente geparst würden, wenn das HTML mit ShadowRoot.innerHTML gesetzt wird.

Ereignisse

Die folgenden Ereignisse sind ShadowRoot über das Ereignis-Bubbling von HTMLSlotElement verfügbar:

HTMLSlotElement slotchange Ereignis

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

Beispiele

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

Innerhalb der Klasse des <custom-square>-Elements enthalten wir einige Lebenszyklus-Callbacks, die einen Aufruf an eine externe Funktion, updateStyle(), machen, die tatsächlich die Größe und Farbe auf das Element anwendet. Sie sehen, dass wir 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 Funktion updateStyle() selbst erhalten wir einen Verweis auf das Shadow-DOM mittels Element.shadowRoot. Von hier aus verwenden wir Standard-DOM-Traversal-Techniken, um das <style>-Element innerhalb des 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
• Webkomponenten