[jaffathecake]

> Correct if I'm wrong, but this still doesn't allow us to define the dropdown content and selected content for each option separately?

There are a few different cases worth considering:

# I want to display the option content in the <selectedoption> as is

Great! Use <selectedoption>

# I want to display the option content in the <selectedoption> a little differently (eg, hide the associated <img> or a different font-weight)

In this case, you're probably best off using a little CSS to style the content of <selectedoption> different, eg hide particular elements.

# I want to display something completely different in the <selectedoption>

<selectedoption> is optional, so one thing you can do here is just… not use it, and instead change the content of your <button> in response to state changes. This requires JavaScript.

If you really want to use <selectedoption> for this, then you could do this:

    <option>
      <div class="option-content">…</div>
      <div class="selectedoption-content">…</div>
    </option>

Along with the CSS:

    option .selectedoption-content { display: none }
    selectedoption .option-content { display: none }