HTML/Elemente/slot
Aus SELFHTML-Wiki
Das slot-Element dient als Platzhalter für Inhalt, der dann dynamisch eingefügt wird. Die Browser ordnen ihm den display-Modus display:contents</code>, so dass die über <slot> eingefügten Elemente sich so verhalten, als würde das <slot>-Element nicht existieren.
- Syntax
- Start-Tag: notwendig
- End-Tag: notwendig
- WAI‑ARIA‑Rolle
- Keine Rolle zugeordnet
- Elternelemente
- Darf vorkommen in:
template - erlaubte Inhalte
- ---
Beispiel
<template id="adresse">
<slot name="name"></slot><br>
<slot name="anschrift"></slot"><br>
<strong><slot name="plz"></slot></strong> <slot name="ort"></slot>
</template>
<adress-block>
<span slot="name">H.T. Emmel</slot>
<span slot="anschrift">Energieweg 13</span>
<span slot="plz">44135</span>
<span slot="ort">Dortmund</span>
</adress-block>
Dieses adresse-Template besitzt 4 Slots: Name, Adresse (Straße oder Postfach), plz und ort. Wenn Sie dieses Template verwenden, um das Custom Element <adress-block> zu erstellen, dann werden die Inhaltselemente anhand ihres Slot-Attributs automatisch in den Slot mit diesem Namen eingesetzt.
| Name | Inhalt | Standardwert | Bedeutung |
|---|---|---|---|
| Universalattribute | |||
| id | ID | identifiziert ein einziges Element innerhalb eines Dokuments | |
| class | Token | ordnet ein Element einer oder mehreren Klassen zu. | |
| accesskey | Text (string) | Tastaturkürzel | |
| contenteditable | Boolean | editierbarer Inhalt | |
| dir | ltr, rtl | definiert die Schreibrichtung innerhalb des Dokuments | |
| draggable | Boolean | kann mit Drag & Drop gezogen werden | |
| hidden | Boolean | versteckter Inhalt | |
| lang | Sprachkürzel | legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766] | |
| spellcheck | Boolean | Rechtschreibprüfung Sollte auch für input type="password" deaktiviert werden.
| |
| style | String (Text) | notiert direkt in einem Element- style sheet data | |
| tabindex | NUMBER | zeigt an, ob dieses Element fokusiert werden kann, ob es mithilfe der Tastaturnavigation angesteuert werden kann und in welcher Reihenfolge navigiert wird. | |
| title | String (Text) | betitelt oder beschreibt ein Element. | |
Attribut: Pflichtattribut
Attribut: optionales Attribut
Siehe auch
Weblinks
- Spezifikation (W3C): The Shadow-DOM