ShadowRoot

ShadowRoot.activeElement Schreibgeschützt

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

ShadowRoot.adoptedStyleSheets

Fügt ein Array von konstruierten Stylesheets hinzu, die vom Shadow-DOM-Unterbaum verwendet werden sollen. Diese können mit anderen DOM-Unterbäumen geteilt werden, die denselben übergeordneten Document-Knoten und das Dokument selbst teilen.

ShadowRoot.clonable Schreibgeschützt

Ein Boolescher Wert, der anzeigt, ob das Shadow-Root klonbar ist.

ShadowRoot.delegatesFocus Schreibgeschützt

Ein Boolescher Wert, der anzeigt, ob das Shadow-Root 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 Shadow-Tree 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-Tree 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-Root von JavaScript aus zugänglich sind oder nicht.

ShadowRoot.pictureInPictureElement Schreibgeschützt

Gibt das Element innerhalb des Shadow Trees zurück, das derzeit im Bild-in-Bild-Modus angezeigt 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 ist.

ShadowRoot.serializable Schreibgeschützt

Ein Boolescher Wert, der anzeigt, ob das Shadow-Root serialisierbar ist. Ein serialisierbares Shadow-Root innerhalb eines Elements wird durch Element.getHTML() oder ShadowRoot.getHTML() serialisiert, wenn dessen options.serializableShadowRoots-Parameter auf true gesetzt ist. Dies wird gesetzt, wenn das 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-Tree verlinkt oder eingebettet sind.

ShadowRoot.getAnimations()

Gibt ein Array aller Animation-Objekte zurück, die derzeit aktiv sind und deren Zielelemente Nachkommen des Shadow Trees 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()

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

ShadowRoot.setHTMLUnsafe()

Parst eine Zeichenkette von HTML in einen Dokumentfragment ohne Bereinigung, der dann den ursprünglichen Unterbaum des Shadow-Roots ersetzt. Die HTML-Zeichenkette kann deklarative Shadow-Roots enthalten, die als Template-Elemente geparst werden würden, wenn das HTML über ShadowRoot.innerHTML gesetzt wurde.

Die folgenden Ereignisse sind für ShadowRoot über das Event-Bubbling vom HTMLSlotElement verfügbar:

HTMLSlotElement slotchange Ereignis

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

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

Innerhalb der Klassendefinition des <custom-square>-Elements beinhalten 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 werden sehen, dass wir es 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 einen Verweis auf das Shadow-DOM unter Verwendung von Element.shadowRoot. Von hier aus verwenden wir standardmäßige DOM-Traversierungstechniken, um das <style>-Element innerhalb des Shadow-DOMs zu finden und dann das CSS darin 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")};
}
      `;
    }
  }
}

• Verwendung von Shadow DOM
• Webkomponenten