Baseline Widely available *
Das ShadowRoot-Interface der Shadow DOM API ist der Wurzelknoten eines DOM-Unterbaums, der separat vom Haupt-DOM-Baum eines Dokuments gerendert wird.
Sie können eine Referenz auf das Shadow-Root-Element eines Elements über seine Element.shadowRoot-Eigenschaft abrufen, vorausgesetzt, es wurde mit Element.attachShadow() erstellt und die mode-Option auf open gesetzt.
ShadowRoot.activeElement Schreibgeschützt
Gibt das Element innerhalb des Shadow-Baums zurück, das den Fokus hat.
ShadowRoot.adoptedStyleSheets
Fügt dem Shadow-DOM-Unterbaum ein Array von konstruierten Stylesheets hinzu, die 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 fokussierbarer Knoten ausgewählt ist.
ShadowRoot.fullscreenElement Schreibgeschützt
Das Element, das derzeit für diesen Shadow-Baum im Vollbildmodus ist.
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-Roots von JavaScript aus zugänglich sind.
ShadowRoot.pictureInPictureElement Schreibgeschützt
Gibt das Element innerhalb des Shadow-Baums 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 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 von Element.getHTML() oder ShadowRoot.getHTML() serialisiert, wenn sein options.serializableShadowRoots-Parameter auf true gesetzt ist. Dies wird festgelegt, 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 für Stylesheets zurück, die explizit in einen Shadow-Baum eingebunden oder eingebettet wurden.
ShadowRoot.getAnimations()
Gibt ein Array aller Animation-Objekte zurück, die derzeit in Kraft 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 der Einfügemarke repräsentiert.
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 es zu sanitieren, das dann den ursprünglichen Unterbaum des Shadow-Roots ersetzt. Der HTML-String kann deklarative Shadow-Roots enthalten, die als Template-Elemente geparst würden, wenn das HTML mit ShadowRoot.innerHTML gesetzt wurde.
Die folgenden Ereignisse sind über das Ereignisbubbling von HTMLSlotElement für ShadowRoot verfügbar:
HTMLSlotElement slotchange Ereignis
Ein Ereignis, das ausgelöst wird, wenn sich die in diesem Slot enthaltenen Knoten ändern.
Die folgenden Ausschnitte stammen aus unserem life-cycle-callbacks-Beispiel (siehe es auch live), das ein Element erstellt, das ein Quadrat in der im Elementattribut angegebenen GröÃe und Farbe anzeigt.
Innerhalb der Klassendefinition des <custom-square>-Elements fügen wir einige Lifecycle-Callbacks ein, die einen Aufruf an eine externe Funktion updateStyle() durchführen, die tatsächlich die GröÃe und Farbe auf das Element anwendet. Sie 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 updateStyle()-Funktion selbst erhalten wir eine Referenz zur Shadow-DOM unter Verwendung von Element.shadowRoot. Von hier aus verwenden wir Standard-DOM-Traversierungstechniken, um das <style>-Element innerhalb des Shadow-DOM zu finden und aktualisieren anschlieÃend das CSS darin:
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")};
}
`;
}
}
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3