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 teilen, 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 assoziiert ist, oder null, wenn keines gesetzt wurde.

ShadowRoot.delegatesFocus Schreibgeschützt

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

ShadowRoot.fullscreenElement Schreibgeschützt

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

ShadowRoot.host Schreibgeschützt

Gibt eine Referenz zu dem DOM-Element zurück, an das die ShadowRoot angebunden ist.

ShadowRoot.innerHTML

Setzt oder gibt eine Referenz zu dem 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 oder nicht.

ShadowRoot.pictureInPictureElement Schreibgeschützt

Gibt das Element innerhalb des Schattenbaums 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 wurde, während der Zeiger gesperrt ist. null falls die Sperre aussteht, der Zeiger nicht gesperrt ist oder wenn sich das Ziel in einem anderen Baum befindet.

ShadowRoot.referenceTarget Experimentell Nicht standardisiert

Ein nullable Zeichenfolgenwert, der das effektive Ziel eines jeden Elementverweises angibt, der von außerhalb des Host-Elements gegen den Schattenhost gemacht wird. Der Wert sollte die ID eines Elements innerhalb des Schatten-DOMs sein. Wenn festgelegt, führen Zielverweise auf das Host-Element von außerhalb des Schatten-DOMs dazu, dass das referenzierte Zielelement das effektive Ziel des Verweises auf das 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 deren options.serializableShadowRoots-Parameter auf true gesetzt ist. Dies wird gesetzt, wenn die Schattenwurzel erstellt wird.

ShadowRoot.slotAssignment Schreibgeschützt

Gibt eine Zeichenfolge zurück, die den Typ der Slotzuweisung 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 Animation-Objekte zurück, die derzeit wirksam sind und deren Zielelemente Nachkommen des Schattenbaums sind.

ShadowRoot.getSelection() Nicht standardisiert

Gibt ein Selection-Objekt zurück, das den vom Benutzer ausgewählten Textbereich oder die aktuelle Position der Einfügemarke 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 HTML-String in ein DocumentFragment zu parsen und zu bereinigen, das dann den bestehenden Baum im Schatten-DOM ersetzt.

ShadowRoot.setHTMLUnsafe()

Parst einen HTML-String in ein Dokumentfragment, ohne Bereinigung, das dann den ursprünglichen Teilbaum der Schattenwurzel ersetzt. Der HTML-String kann deklarative Schattenwurzeln enthalten, die als Template-Elemente geparst würden, wenn das HTML mit ShadowRoot.innerHTML gesetzt wurde.

Ereignisse

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

HTMLSlotElement slotchange Ereignis

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

Beispiele

Die folgenden Snippets 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 festgelegt sind.

Innerhalb der Klassendefinition des <custom-square>-Elements fügen wir einige Lebenszyklus-Rückrufe hinzu, die einen Aufruf einer externen 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 zum Schatten-DOM unter Verwendung von Element.shadowRoot. Von hier aus verwenden wir Standard-DOM-Traversierungstechniken, um das <style>-Element innerhalb des Schatten-DOMs 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

• Verwendung des Shadow DOM
• Webkomponenten