How should <selectedoption> work?

submited by

Style Pass

2024-10-18 12:00:05

We're finally getting a way to fully style & customise <select> elements! But there's a detail I'd like everyone's opinion on.

If you want to hear about it in depth, I talked about it on OTMT, and there's a great post by Una Kravets. But here's a whirlwind tour:

<selectedoption> automatically displays the currently selected <option>. It's entirely optional, so if you wanted to manually update the content of the <button> when the selected <option> changes, you can, and you get a lot more control that way. But <selectedoption> is much easier, and works without JavaScript.

When the selected <option> changes, it clears the contents of the <selectedoption>, takes a clone of the contents of the newly selected <option>, and inserts it into the <selectedoption>.

This is kinda new and weird behaviour. I recently wrote that I didn't like elements that modify themselves, as I think the light DOM should have a single owner. But, I can't think of a better way to do this, given: