ShadowRoot

ShadowRoot.activeElement Schreibgeschützt

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

ShadowRoot.adoptedStyleSheets

Fügt ein Array von erstellten Stylesheets hinzu, die vom Shadow-DOM-Teilbaum verwendet werden sollen. 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 Boolean, der angibt, ob das Shadow-Root klonbar ist.

ShadowRoot.delegatesFocus Schreibgeschützt

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

ShadowRoot.fullscreenElement Schreibgeschützt

Das Element, das aktuell im Vollbildmodus für diesen Shadow-Baum ist.

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-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 Shadow-Root aus JavaScript zugänglich sind oder nicht.

ShadowRoot.pictureInPictureElement Schreibgeschützt

Gibt das Element innerhalb des Shadow-Baums zurück, das aktuell im Bild-im-Bild-Modus dargestellt wird.

ShadowRoot.pointerLockElement Schreibgeschützt

Gibt das Element zurück, das als Ziel für Mausevents festgelegt ist, während der Zeiger gesperrt ist. null, wenn die Sperrung aussteht, der Zeiger entsperrt ist oder das Ziel in einem anderen Baum liegt.

ShadowRoot.serializable Schreibgeschützt

Ein Boolean, der angibt, ob das Shadow-Root serialisierbar ist. Ein serialisierbares Shadow-Root innerhalb eines Elements wird serialisiert, wenn Element.getHTML() oder ShadowRoot.getHTML() aufgerufen wird und dessen options.serializableShadowRoots-Parameter auf true gesetzt ist. Dies wird beim Erstellen des Shadow-Root festgelegt.

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 einem Shadow-Baum verlinkt oder eingebettet sind.

ShadowRoot.getAnimations()

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

Analysiert einen HTML-String in ein Dokumentfragment, ohne es zu bereinigen, das dann den Original-Teilbaum des Shadowroots ersetzt. Der HTML-String kann deklarative Shadow-Roots enthalten, die als Template-Elemente analysiert werden würden, wenn der HTML-String mit ShadowRoot.innerHTML gesetzt wurde.

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

HTMLSlotElement slotchange-Ereignis

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

Die folgenden Code-Snippets stammen aus unserem life-cycle-callbacks-Beispiel (siehe es auch live), das ein Element erstellt, das ein Quadrat von Größe und Farbe anzeigt, 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 einer externen Funktion, updateStyle(), machen, die tatsächlich die Größe und Farbe auf das Element anwendet. Sie werden sehen, dass wir dieser Funktion this (das benutzerdefinierte Element selbst) als Parameter übergeben.

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 mit Element.shadowRoot. Von hier aus verwenden wir Standard-DOM-Traversierungstechniken, um das <style>-Element innerhalb des Shadow-DOM zu finden und dann das darin gefundene 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")};
}
      `;
    }
  }
}