ShadowRoot

Instanz-Eigenschaften

ShadowRoot.activeElement Schreibgeschützt

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

ShadowRoot.adoptedStyleSheets

Fügen Sie ein Array erstellter Stylesheets hinzu, das vom Shadow DOM-Teilbaum verwendet werden soll. Diese können mit anderen DOM-Teilbäumen geteilt werden, die denselben übergeordneten Document-Knoten und das Dokument selbst teilen.

ShadowRoot.clonable Schreibgeschützt

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

ShadowRoot.delegatesFocus Schreibgeschützt

Ein boolescher Wert, der angibt, ob die 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 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 Shadow-Root 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-in-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 Sperre aussteht, der Zeiger entsperrt ist oder wenn das Ziel in einem anderen Baum liegt.

ShadowRoot.referenceTarget Experimentell Nicht standardisiert

Ein einstellbarer string-Wert, der das effektive Ziel eines Element-Referenzes anzeigt, das gegen den Shadow-Host von außerhalb des Hostelements gemacht wird. Der Wert sollte die ID eines Elements innerhalb des Shadow DOM sein. Wenn gesetzt, werden Zielverweise auf das Hostelement von außerhalb des Shadow DOMs dazu führen, dass das referenzierte Zielelement zum effektiven Ziel des Verweises auf das Hostelement wird.

ShadowRoot.serializable Schreibgeschützt

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

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 zurück, für Stylesheets, die explizit in einen Shadow-Baum eingebunden oder eingebettet sind.

Instanz-Methoden

ShadowRoot.getAnimations()

Gibt ein Array aller Animation-Objekte zurück, die aktuell 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

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

ShadowRoot.setHTMLUnsafe()

Parst einen String von HTML in ein Dokumentfragment, ohne Bereinigung, das dann den ursprünglichen Teilbaum der Shadowroot ersetzt. Der HTML-String kann deklarative Shadow-Roots enthalten, die als Vorlagenelemente geparst würden, wenn HTML mithilfe von ShadowRoot.innerHTML gesetzt wurde.

Ereignisse

Die folgenden Ereignisse sind für ShadowRoot verfügbar, über Ereignisbläschen von HTMLSlotElement:

HTMLSlotElement slotchange Ereignis

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

Beispiele

Die folgenden Schnipsel stammen aus unserem life-cycle-callbacks-Beispiel (sehen Sie sich das Beispiel live an), das ein Element erstellt, das ein Quadrat in einer Größe und Farbe anzeigt, die in den Attributen des Elements spezifiziert 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 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 Standardmethoden für die DOM-Traversierung, um das <style>-Element innerhalb des Shadow DOM zu finden und dann 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

• Using the shadow DOM
• Web components