ShadowRoot

Instanz-Eigenschaften

ShadowRoot.activeElement Schreibgeschützt

Gibt das innerhalb des Shadow-Baums fokussierte Element zurück.

ShadowRoot.adoptedStyleSheets

Fügt ein Array von konstruierten 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 teilen, sowie mit dem Dokument selbst.

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 ist.

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 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 Shadow-Root aus JavaScript 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 dargestellt 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 das Ziel in einem anderen Baum ist.

ShadowRoot.referenceTarget Schreibgeschützt Experimentell

Ein Zeichenfolgenwert, der das effektive Ziel eines Elementverweises angibt, der vom Shadow-Host aus außerhalb des Host-Elements gemacht wird. Der Wert sollte die ID eines Elements innerhalb des Shadow-DOMs sein. Wenn festgelegt, führt ein Zielverweis auf das Host-Element von außerhalb des Shadow-DOMs dazu, dass das referenzierte Ziel-Element zum effektiven Ziel des Verweises auf das Host-Element wird.

ShadowRoot.serializable Schreibgeschützt

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

ShadowRoot.slotAssignment Schreibgeschützt

Gibt eine Zeichenfolge zurück, die den Slot-Zuweisungstyp 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 eingebunden oder eingebettet sind.

Instanzmethoden

ShadowRoot.getAnimations()

Gibt ein Array aller aktuell wirksamen Animation-Objekte zurück, deren Zielelemente Nachkommen des Shadow-Baums sind.

ShadowRoot.getSelection() Nicht standardisiert

Gibt ein Selection-Objekt zurück, das die vom Benutzer ausgewählte Textrange 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

Bietet eine XSS-sichere Methode zum Parsen und Bereinigen eines HTML-Strings in ein DocumentFragment, das dann den vorhandenen Baum im Shadow-DOM ersetzt.

ShadowRoot.setHTMLUnsafe()

Parst einen HTML-String in ein Dokumentfragment ohne Bereinigung, das anschließend den ursprünglichen Unterbaum des Shadowroot ersetzt. Der HTML-String kann deklarative Shadow-Roots enthalten, die als Vorlagenelemente geparst würden, wenn das HTML mithilfe von ShadowRoot.innerHTML festgelegt wurde.

Ereignisse

Die folgenden Ereignisse sind für ShadowRoot verfügbar, da sie vom HTMLSlotElement weitergeleitet werden:

HTMLSlotElement slotchange Ereignis

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

Beispiele

Die folgenden Codeausschnitte stammen aus unserem life-cycle-callbacks Beispiel (siehe es sich auch live an), das ein Element erstellt, das ein Quadrat in der im Element angegebenen Größe und Farbe anzeigt.

Innerhalb der Klasse des <custom-square>-Elements fügen wir einige Lebenszyklus-Callback-Methoden ein, die einen Aufruf an eine externe Funktion, updateStyle(), machen, die die Größe und Farbe tatsächlich 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 mithilfe von Element.shadowRoot. Von hier aus verwenden wir Techniken zur DOM-Durchquerung, 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

• Verwendung des Shadow DOM
• Webkomponenten