ShadowRoot

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, die denselben übergeordneten Document-Knoten teilen, und dem Dokument selbst geteilt werden.

ShadowRoot.clonable Schreibgeschützt

Ein boolescher Wert, der angibt, ob das Schatten-Root klonbar ist.

ShadowRoot.delegatesFocus Schreibgeschützt

Ein boolescher Wert, der angibt, ob das Schatten-Root den Fokus delegiert, wenn ein nicht fokussierbares Element ausgewählt wird.

ShadowRoot.fullscreenElement Schreibgeschützt

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

ShadowRoot.host Schreibgeschützt

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

ShadowRoot.innerHTML

Setzt oder gibt eine Referenz 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 Schatten-Roots von JavaScript aus zugänglich sind oder nicht.

ShadowRoot.pictureInPictureElement Schreibgeschützt

Gibt das Element innerhalb des Schattenbaums zurück, das momentan 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 Sperrung aussteht, der Zeiger entsperrt ist oder wenn das Ziel in einem anderen Baum liegt.

ShadowRoot.serializable Schreibgeschützt

Ein boolescher Wert, der angibt, ob das Schatten-Root serialisierbar ist. Ein serialisierbares Schatten-Root innerhalb eines Elements wird von Element.getHTML() oder ShadowRoot.getHTML() serialisiert, wenn der options.serializableShadowRoots-Parameter auf true gesetzt ist. Dies wird festgelegt, wenn das Schatten-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 für Stylesheets zurück, die explizit in einen Schattenbaum verlinkt oder darin eingebettet sind.

ShadowRoot.getAnimations()

Gibt ein Array aller Animation-Objekte zurück, die derzeit wirksam sind und deren Ziel-Elemente 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 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.setHTMLUnsafe()

Parst einen HTML-String in ein Dokumentfragment ohne Säuberung, das dann den ursprünglichen Teilbaum des Schatten-Roots ersetzt. Der HTML-String kann deklarative Schattenwurzeln enthalten, die als Template-Elemente geparst würden, wenn das HTML mithilfe von ShadowRoot.innerHTML festgelegt wurde.

Die folgenden Ereignisse stehen ShadowRoot über Ereignis-Bubbling von HTMLSlotElement zur Verfügung:

HTMLSlotElement-Ereignis slotchange

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

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

Innerhalb der <custom-square>-Elementklasse beinhalten wir einige Lebenszyklus-Callbacks, die einen Aufruf an eine externe Funktion, updateStyle(), vornehmen, 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 eine Referenz zum Schatten-DOM mittels Element.shadowRoot. Von hier aus verwenden wir Standard-DOM-Durchquerungstechniken, um das <style>-Element im Schatten-DOM zu finden und dann die 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")};
}
      `;
    }
  }
}

• Verwendung des Shadow DOM
• Webkomponenten