JavaScript/DOM/Element/attachShadow

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

Browserunterstützung
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);

element

Das Element, dem ein Shadow DOM hinzugefügt werden soll (der beabsichtigte Shadow Host).

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.

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.

slotAssignment

Ein String, der die Art der Zuordnung von Elementen zu Slots vorgibt. Ein möglicher Wert ist named, wodurch Elemente mit einem slot-Attribut automatisch <slot>-Elementen zugeordnet werden, deren name-Attribut den gleiche Wert hat. Der andere mögliche Wert ist manual, der die automatische Zuordnung verhindert. Statt dessen müssen Sie JavaScript benutzen, um die Zuordnung mittels der attach-Methode des <slot>-Elements durchzuführen.

Zurückgegeben wird ein ShadowRoot-Objekt als Einstiegspunkt in das erzeugte Shadow DOM.

Siehe auch

• Web Components

Weblinks

• WHATWG: attachShadow Beschreibung
• MDN: Element.attachShadow