JavaScript/DOM/Element/attachShadow
Aus SELFHTML-Wiki
< JavaScript | DOM | Element
Die Methode Element.attachShadow() wird bei der Erstellung von Web Components verwendet. Sie dient dazu, einem benutzerdefinierten Element ein Shadow DOM hinzuzufügen. Man kann auch einigen regulären Elementen ein Shadow DOM hinzufügen. Die dafür erlaubten Elemente sind:
- article
- aside
- blockquote
- body
- div
- footer
- h1 bis h6
- header
- main
- nav
- p
- section
- span
Details: caniuse.com
Beachten Sie: In früheren Versionen der Spezifikation wurde die Methode
createShadowRoot
beschrieben. Diese ist missbilligt und durch attachShadow
ersetzt worden.Syntax
shadowRoot = element.attachShadow(shadowRootInit);
shadowRoot
- Ein ShadowRoot Objekt als Einstiegspunkt in das erzeugte Shadow DOM
element
- Das Element, dem ein Shadow DOM hinzugefügt werden soll
shadowRootInit
- Ein Objekt mit Optionen für die Erzeugung. Es kann die folgenden Eigenschaften erhalten
-
mode
- Ein String, der den Kapselungsmodus für das Shadow DOM festlegt. Er ist entweder
"open"
oder"closed"
. Nur, wenn das Shadow DOM mit mode: "open" erzeugt wurde, liefert die shadowRoot-Eigenschaft des Shadow-Hosts ein ShadowRoot-Objekt zurück.</dd> -
delegatesFocus
- Ein boolescher Wert, den man auf true setzen kann, damit bei einem Klick auf ein nichtfokussierbares Element des Shadow DOM der erste fokussierbare Teil des DOM den Fokus erhält. Der Shadow Host gilt dann als fokussiert.
-
Siehe auch
Weblinks
- WHATWG: attachShadow Beschreibung
- MDN: Element.attachShadow