Signatur
Beschreibung
Die Schnittstelle HTMLSelectedContentElement gehört zum Konzept des anpassbaren Auswahlfelds (customizable select). Setzt man in CSS appearance: base-select auf ein <select> und dessen ::picker(select), darf das Auswahlfeld beliebiges HTML enthalten – etwa Bilder oder Icons in den Optionen. Im Schaltflächenbereich zeigt dann ein <selectedcontent>-Element den Inhalt der gewählten Option an.
Das Element steht innerhalb eines <button>, der das erste Kind des <select> ist. Ändert sich die Auswahl, ersetzt der Browser den Inhalt von <selectedcontent> automatisch durch eine Klon-Kopie (cloneNode(true)) der Kinder der gewählten <option>. So lässt sich die Anzeige der Auswahl per CSS anders gestalten als die Liste, z. B. indem Beschreibungstexte in der Schaltfläche ausgeblendet werden.
Die Schnittstelle bringt keine eigenen Eigenschaften oder Methoden mit. Sie erbt alles von HTMLElement, Element, Node und EventTarget. In JavaScript nutzt man sie vor allem zur Feature-Erkennung, für Typprüfungen mit instanceof und zum Auslesen oder Gestalten des angezeigten Inhalts.
Rückgabewert
document.createElement("selectedcontent"). Einen öffentlichen Konstruktor gibt es nicht; new HTMLSelectedContentElement() wirft einen TypeError.Beispiele
Feature-Erkennung und Instanz erzeugen
const supported = 'HTMLSelectedContentElement' in window;
console.log('Anpassbares select unterstützt:', supported);
if (supported) {
const el = document.createElement('selectedcontent');
console.log(el instanceof HTMLSelectedContentElement); // true
console.log(el.tagName);
}Anpassbares select mit Icons per JavaScript aufbauen
// CSS vorausgesetzt:
// select, ::picker(select) { appearance: base-select; }
const select = document.createElement('select');
select.name = 'land';
const button = document.createElement('button');
button.append(document.createElement('selectedcontent'));
select.append(button);
const laender = [
{ value: 'de', flag: '🇩🇪', label: 'Deutschland' },
{ value: 'at', flag: '🇦🇹', label: 'Österreich' },
{ value: 'ch', flag: '🇨🇭', label: 'Schweiz' }
];
for (const { value, flag, label } of laender) {
const option = document.createElement('option');
option.value = value;
const icon = document.createElement('span');
icon.className = 'flag';
icon.textContent = flag;
option.append(icon, ` ${label}`);
select.append(option);
}
document.body.append(select);
console.log(select.querySelector('selectedcontent').textContent);Angezeigten Inhalt nach Auswahländerung auslesen
const select = document.querySelector('select[name="land"]');
const anzeige = select.querySelector('selectedcontent');
select.addEventListener('change', () => {
// Der Browser hat den Klon der gewählten Option bereits eingesetzt
console.log('Wert:', select.value);
console.log('Angezeigt:', anzeige.textContent.trim());
});
// Auswahl per Skript ändern und Event auslösen
select.value = 'ch';
select.dispatchEvent(new Event('change'));// Wichtig · Fallstricke
- Browser-Kompatibilität: Die Schnittstelle ist experimentell und bisher nur in Chromium-Browsern (Chrome/Edge ab 135) verfügbar. Prüfen Sie die Unterstützung mit
'HTMLSelectedContentElement' in window. Ältere Browser behandeln<selectedcontent>als unbekanntes Element (HTMLUnknownElement) und zeigen ein normales Auswahlfeld an. Das ist eine brauchbare progressive Verbesserung. - Kopie statt Live-Verbindung: Der Inhalt ist ein Klon. Ändern Sie per Skript den Inhalt der gerade gewählten
<option>, aktualisiert sich<selectedcontent>erst bei der nächsten Auswahländerung. Eigene Änderungen am Inhalt von<selectedcontent>überschreibt der Browser beim nächsten Wechsel. - IDs und Event-Listener: Beim Klonen werden auch
id-Attribute kopiert. Das kann zu doppelten IDs führen. Event-Listener an Elementen in der Option werden nicht mitkopiert. - Position: Das Element wirkt nur, wenn es in einem
<button>steht und dieser das erste Kind eines<select>ist. Zusätzlich braucht esappearance: base-select. - Keine eigene API: Die Schnittstelle hat außer den geerbten Mitgliedern von
HTMLElementkeine Eigenschaften oder Methoden. Den gewählten Wert liefert weiterhinHTMLSelectElement.valuebzw.selectedOptions.