ShadowRoot

Instanzeigenschaften

ShadowRoot.activeElement Schreibgeschützt

Gibt das Element innerhalb des Schattenbaums zurück, das den Fokus hat.

ShadowRoot.adoptedStyleSheets

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

ShadowRoot.clonable Schreibgeschützt

Ein boolescher Wert, der anzeigt, ob die Schattenwurzel klonbar ist.

ShadowRoot.customElementRegistry Schreibgeschützt

Gibt das CustomElementRegistry-Objekt zurück, das mit dieser Schattenwurzel verknüpft ist, oder null, wenn keines festgelegt wurde.

ShadowRoot.delegatesFocus Schreibgeschützt

Ein boolescher Wert, der anzeigt, ob die Schattenwurzel den Fokus delegiert, wenn ein nicht fokussierbarer Knoten ausgewählt wird.

ShadowRoot.fullscreenElement Schreibgeschützt

Das Element, das derzeit im Vollbildmodus für diesen Schattenbaum ist.

ShadowRoot.host Schreibgeschützt

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

ShadowRoot.innerHTML

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

ShadowRoot.mode Schreibgeschützt

Der Modus der ShadowRoot, entweder open oder closed. Dies definiert, ob die internen Funktionen der Schattenwurzel von JavaScript aus zugänglich sind.

ShadowRoot.pictureInPictureElement Schreibgeschützt

Gibt das Element innerhalb des Schattenbaums zurück, das derzeit im Bild-in-Bild-Modus präsentiere 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 Sperre aussteht, der Zeiger entsperrt ist oder wenn das Ziel in einem anderen Baum liegt.

ShadowRoot.referenceTarget

Ein nullable Zeichenkettenwert, der das effektive Ziel jedes Element-Referenzversuchs an den Schatten-Host von außerhalb des Host-Elements angibt. Der Wert sollte die ID eines Elements innerhalb des Schatten-DOM sein. Wenn gesetzt, bewirken Zielreferenzen zum Host-Element von außerhalb des Schatten-DOM, dass das referenzierte Ziel-Element das effektive Ziel der Referenz zum Host-Element wird.

ShadowRoot.serializable Schreibgeschützt

Ein boolescher Wert, der anzeigt, ob die Schattenwurzel serialisierbar ist. Eine serialisierbare Schattenwurzel innerhalb eines Elements wird von Element.getHTML() oder ShadowRoot.getHTML() serialisiert, wenn dessen options.serializableShadowRoots-Parameter auf true gesetzt ist. Dies wird festgelegt, wenn die Schattenwurzel erstellt wird.

ShadowRoot.slotAssignment Schreibgeschützt

Gibt eine Zeichenkette 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 Schattenbaum verlinkt oder eingebettet sind.

Instanzmethoden

ShadowRoot.getAnimations()

Gibt ein Array aller derzeit wirksamen Animation-Objekte zurück, deren Ziel-Elemente Nachkommen des Schattenbaums sind.

ShadowRoot.getSelection()

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

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()

Bietet eine XSS-sichere Methode, um einen HTML-Zeichenfolgen in ein DocumentFragment zu parsen und zu bereinigen, der dann den vorhandenen Baum im Schatten-DOM ersetzt.

ShadowRoot.setHTMLUnsafe()

Parsiert eine HTML-Zeichenfolge in ein Dokument-Fragment, ohne Bereinigung, das dann den ursprünglichen Teilbaum der Schattenwurzel ersetzt. Die HTML-Zeichenfolge kann deklarative Schattenwurzeln enthalten, die als Template-Elemente geparst würden, wenn der HTML-Code mit ShadowRoot.innerHTML gesetzt wurde.

Ereignisse

Die folgenden Ereignisse stehen ShadowRoot durch Ereignisbubbeln von HTMLSlotElement zur Verfügung:

HTMLSlotElement slotchange Ereignis

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

Beispiele

Die folgenden Codebeispiele stammen aus unserem life-cycle-callbacks-Beispiel (sehen Sie es sich auch live an), welches ein Element erstellt, das ein Quadrat in einer Größe und Farbe darstellt, 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 Funktion updateStyle() selbst erhalten wir eine Referenz auf das Schatten-DOM mithilfe von Element.shadowRoot. Von hier aus verwenden wir Standard-DOM-Durchlauftechniken, um das <style>-Element im Schatten-DOM zu finden und dann die darin enthaltenen CSS-Stile 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