Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Element: slot-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Dieslot-Eigenschaft derElement-Schnittstelle gibt den Namen des Shadow-DOM-Slots zurück, in den das Element eingefügt wird.
Ein Slot ist ein Platzhalter innerhalb einerWeb-Komponente, den Benutzer mit ihrem eigenen Markup füllen können (sieheVerwendung von Templates und Slots für weitere Informationen).
Wert
Ein String.
Beispiele
In unseremsimple-template Beispiel (live ansehen) erstellen wir ein triviales benutzerdefiniertes Elementbeispiel namens<my-paragraph>, in dem ein Shadow-Root angehängt und dann mit den Inhalten eines Templates, das einen Slot namensmy-text enthält, gefüllt wird.
Wenn<my-paragraph> im Dokument verwendet wird, wird der Slot durch ein zu beschlottendes Element gefüllt, indem es innerhalb des Elements mit einemslot-Attribut mit dem Wertmy-text eingefügt wird. Hier ist ein solches Beispiel:
<my-paragraph> <span slot="my-text">Let's have some different text!</span></my-paragraph>In unserer JavaScript-Datei erhalten wir eine Referenz auf das oben gezeigte<span>, und dann protokollieren wir eine Referenz auf den Namen des entsprechenden<slot>-Elements.
let slottedSpan = document.querySelector("my-paragraph span");console.log(slottedSpan.slot); // logs 'my-text'Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-element-slot① |