Attributen
Dit element bevat de globale attributen.
Beschrijving
Je gebruikt het <selectedcontent>-element als het enige onderliggende element van een <button>-element, dat op zijn beurt het eerste onderliggende element van het <select>-element moet zijn. Elk <option>-element, het enige andere geldige onderliggende element van <select>, moet na het paar <button> en geneste <selectedcontent> komen.
<select>
<button>
<selectedcontent></selectedcontent>
</button>
<option></option>
...
</select>Hoe <selectedcontent> achter de schermen werkt
Het <selectedcontent>-element bevat een kloon van de inhoud van de momenteel geselecteerde <option>. De browser rendert deze kloon met behulp van cloneNode(). Wanneer de geselecteerde <option> verandert, zoals tijdens een change-gebeurtenis, wordt de inhoud van <selectedcontent> vervangen door een kloon van de nieuw geselecteerde <option>. Het is belangrijk om je bewust te zijn van dit gedrag, vooral bij het werken met dynamische inhoud.
Omdat de browser <selectedcontent> alleen bijwerkt wanneer de geselecteerde <option> verandert, worden eventuele dynamische wijzigingen aan de inhoud van de geselecteerde <option> nadat de <select> is gerenderd, niet naar <selectedcontent> gekloond. Je moet <selectedcontent> dan handmatig bijwerken. Let hierop als je populaire front-end JavaScript-frameworks gebruikt waarbij <option>-elementen na de initiële render dynamisch worden bijgewerkt – het resultaat komt dan mogelijk niet overeen met wat je in <selectedcontent> verwacht.
Inertie van <selectedcontent>
Standaard is elke <button> binnen een <select>-element inert. Als gevolg daarvan is alle inhoud binnen die button—inclusief <selectedcontent>—ook inert.
Dit betekent dat gebruikers niet kunnen interacteren met of de focus kunnen leggen op inhoud binnen <selectedcontent>.
De inhoud van de geselecteerde optie stylen met CSS
Je kunt de inhoud van het momenteel geselecteerde <option>-element targeten en stylen hoe deze binnen de select-button verschijnt. Het stylen van de button heeft geen invloed op de styling van de inhoud van de <option> die is gekloond. Hiermee kun je aanpassen hoe de geselecteerde optie in de button verschijnt, los van hoe deze in de vervolgkeuzelijst verschijnt.
Je <option>-elementen kunnen bijvoorbeeld iconen, afbeeldingen of zelfs video's bevatten die er in de vervolgkeuzelijst netjes uitzien, maar die ervoor kunnen zorgen dat de select-<button> groter wordt, er rommelig uitziet en de omringende lay-out beïnvloedt. Door de inhoud binnen <selectedcontent> te targeten, kun je elementen zoals afbeeldingen in de button verbergen, zonder invloed te hebben op hoe ze in de vervolgkeuzelijst verschijnen, zoals te zien is in het volgende fragment:
selectedcontent img {
display: none;
}
Als de elementen <button> en/of <selectedcontent> niet binnen <select> zijn opgenomen, maakt de browser een impliciete <button> aan om de inhoud van de geselecteerde <option> weer te geven. Deze fallback-button kan niet worden getarget met CSS via de typeselector button of selectedcontent.
Voorbeelden
Je kunt een volledig voorbeeld met het <selectedcontent>-element bekijken in onze handleiding Aanpasbare select-elementen.
Technische samenvatting
| Inhoudscategorieën | Geen |
|---|---|
| Toegestane inhoud |
Weerspiegelt de inhoud van de geselecteerde <option>.
|
| Tag weglaten | Geen, zowel de begin- als de eindtag zijn verplicht. |
| Toegestane ouders |
Een <button>-element dat het eerste onderliggende element is van een <select>-element.
|
| Impliciete ARIA-rol | Geen |
| Toegestane ARIA-rollen | Geen |
| DOM-interface | HTMLSelectedContentElement |