[select] `<selectedoption for=id>` as an alternative to split buttons and `<button type=popover>`

[josepharhar]

Our latest idea is that in order to support "split buttons" where one button has the <selectedoption> and does something author defined and another button actually opens the popover, we support slotting multiple <button>s inside a <select> into the in-page portion and signify which button opens the popover with <button type=popover>.

Instead of doing this, we could make <selectedoption> capable of living outside of the <select> and link them together by supporting the existing for attribute on <selectedoption>. This has some benefits:

1. Removes the restriction of only using <selectedoption> inside a <button>.
2. Removes the <button type=popover> attribute and complicated algorithms to figure out which button(s) open the popover, which I am still trying to figure out how to implement.
3. Might make accessibility mapping and other things easier since only one button is allowed inside the select @scottaohara
4. Might make select changes easier to standardize since I don't have to add a type=popover attribute.

Current way of making a split button:

<select>
  <button>i submit a form or something <selectedoption></selectedoption></button>
  <button type=popover>open dropdown</button>
  ...
</select>

What I am proposing:

<button>i submit a form or something <selectedoption for=myselect></selectedoption></button>
<select id=myselect>
  <button>open dropdown</button>
</select>

In cases where the authors want the layout boxes of the two buttons to be siblings, they can put display:contents on the <select>. I think this also might be worth doing by default in the UA stylesheet.