What problem are you trying to solve?

Right now, the <selectedcontent> element does not clone option elements when it is in a <select multiple>. With base appearance <select multiple size=1>, the <selectedcontent> element would be useful if the author wants to display the currently selected options inside the button.

Here's an example of a multi-select library which shows each option in the button, rather than text which just says "2 selected" or "3 selected": https://primereact.org/multiselect/

What solutions exist today?

Use script to manually change the contents of the button element every time the select is changed.

How would you solve it?

Clone each selected option element into the selectedcontent element, one after another. Based on an openui discussion, we should also automatically create separator elements for each cloned option: openui/open-ui#1355 (comment)

Here is what the resulting DOM would look like after the selectedcontent element updates itself:

<select multiple size=1>
  <selectedcontent>
    <div>one</div>
    <div>two</div>
  </selectedcontent>
  <option selected>one</option>
  <option selected>two</option>
  <option>three</option>
</select>

Anything else?

No response