<selectedcontent>: Das ausgewählte Optionsanzeige-Element

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das <selectedcontent> HTML wird innerhalb eines <select>-Elements verwendet, um den Inhalt der derzeit ausgewählten <option> innerhalb seines ersten Kind-<button> anzuzeigen. Dies ermöglicht es, alle Teile eines <select>-Elements zu gestalten, was als "anpassbare Selects" bezeichnet wird.

Attribute

Dieses Element enthält die globalen Attribute.

Beschreibung

Sie verwenden das <selectedcontent>-Element als einziges Kind eines <button>-Elements, welches das erste Kind des <select>-Elements sein muss. Jedes <option>-Element, das einzige andere gültige Kind von <select>, muss nach dem <button> und dem verschachtelten <selectedcontent>-Paar folgen.

html
<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option></option>
  ...
</select>

Wie <selectedcontent> hinter den Kulissen arbeitet

Das <selectedcontent>-Element enthält einen Klon des Inhalts der aktuell ausgewählten <option>. Der Browser rendert diesen Klon mit cloneNode(). Wenn sich die ausgewählte <option> ändert, wie z.B. während eines change-Ereignisses, wird der Inhalt von <selectedcontent> durch einen Klon der neu ausgewählten <option> ersetzt. Sich dieses Verhaltens bewusst zu sein ist wichtig, insbesondere wenn Sie mit dynamischen Inhalten arbeiten.

Warnung: Da der Browser <selectedcontent> nur aktualisiert, wenn sich die ausgewählte <option> ändert, wird jede dynamische Änderung am Inhalt der ausgewählten <option> nach dem Rendern des <select> nicht zu <selectedcontent> geklont. Sie müssen <selectedcontent> manuell aktualisieren. Achten Sie darauf, wenn Sie eines der bekannten JavaScript-Frameworks für Front-End verwenden, bei dem <option>-Elemente dynamisch nach der ersten Darstellung aktualisiert werden – das Ergebnis kann möglicherweise nicht dem entsprechen, was Sie in <selectedcontent> erwarten.

<selectedcontent> Unbeweglichkeit

Standardmäßig ist jeder <button> innerhalb eines <select>-Elements inert. Folglich ist auch aller Inhalt innerhalb dieses Buttons — einschließlich <selectedcontent> — inert. Das bedeutet, dass Benutzer nicht mit dem Inhalt innerhalb von <selectedcontent> interagieren oder darauf fokussieren können.

Styling des Inhalts der ausgewählten Option mit CSS

Sie können den Inhalt des derzeit ausgewählten <option>-Elements anvisieren und gestalten, wie er im Select-Button erscheint. Das Styling des Buttons hat keine Auswirkungen auf das Styling des Inhalts der <option>, die geklont wurde. Dies ermöglicht es Ihnen, das Erscheinungsbild der ausgewählten Option im Button anzupassen, unabhängig davon, wie sie in der Drop-down-Liste erscheint.

Zum Beispiel können Ihre <option>-Elemente Symbole, Bilder oder sogar Videos enthalten, die in der Drop-down-Liste gut gerendert werden, aber den Select-<button> vergrößern, unordentlich aussehen lassen und das umliegende Layout beeinflussen könnten. Indem Sie den Inhalt innerhalb von <selectedcontent> anvisieren, können Sie Elemente, wie Bilder, im Button ausblenden, ohne zu beeinflussen, wie sie in der Dropdown-Liste erscheinen, wie im folgenden Snippet gezeigt:

css
selectedcontent img {
  display: none;
}

Hinweis: Wenn die Elemente <button> und/oder <selectedcontent> nicht innerhalb <select> enthalten sind, erstellt der Browser implizit ein <button>, um den Inhalt der ausgewählten <option> anzuzeigen. Dieser Ersatz-Button kann nicht mit CSS unter Verwendung des button oder selectedcontent Type-Selectors angesteuert werden.

Beispiele

Sie können ein vollständiges Beispiel sehen, das das <selectedcontent>-Element in unserem anpassbare Select-Elemente Leitfaden enthält.

Technische Zusammenfassung

Content-Kategorien Keine
Erlaubter Inhalt Spiegelt den Inhalt der ausgewählten <option> wider.
Tag-Auslassung Keine, sowohl das Start- als auch das Endtag sind zwingend erforderlich.
Erlaubte Eltern Ein <button>-Element, das das erste Kind eines <select>-Elements ist.
Implizite ARIA-Rolle Keine
Erlaubte ARIA-Rollen Keine
DOM-Schnittstelle [`HTMLSelectedContentElement`](/de/docs/Web/API/HTMLSelectedContentElement)

Spezifikationen

Specification
HTML
# the-selectedcontent-element

Browser-Kompatibilität

Siehe auch