JavaScript/DOM/Element/attachShadow

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Element
Wechseln zu: Navigation, Suche

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