Update content model for customizable select

[josepharhar]

This PR updates the content model for the <select>, <option>, and <optgroup> elements in support of customizable <select>.

The major additions are:

• <select> and <optgroup> can contain <div> elements.
• <option> elements can contain <div> and non-interactive phrasing content.
• <optgroup> can have a child <legend> to represent its label.

Fixes #10317

• At least two implementers are interested (and none opposed):
  • Chrome
  • Mozilla: Customizable select element mozilla/standards-positions#1060
  • WebKit: Customizable select element WebKit/standards-positions#386
• Tests are written and can be reviewed and commented upon at:
  • https://wpt.fyi/results/html/semantics/forms/the-select-element/customizable-select/
• Implementation bugs are filed:
  • Chromium: Already implemented
  • Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1944403
  • WebKit: https://bugs.webkit.org/show_bug.cgi?id=286642
• MDN issue is filed: Customizable select element mdn/content#37857
• The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

---

/dom.html ( diff )
/form-elements.html ( diff )
/grouping-content.html ( diff )
/index.html ( diff )
/indices.html ( diff )
/rendering.html ( diff )
/scripting.html ( diff )
/text-level-semantics.html ( diff )

[zcorpan]

Is the idea to allow <select><div><h1><option> and such? Or only <select><div><div><option>?

If the former, you need to change the definition of phrasing content to include "option (if it is a descendant of a select element), optgroup (if it is a descendant of a select element)".

If the latter, you need to change the content model if div and span to switch on whether there's an ancestor select element, and if so allow "select element inner content elements". (But still disallow nesting of optgroup and option)

[josepharhar]

Is the idea to allow <select><div><h1><option> and such? Or only <select><div><div><option>?

If the former, you need to change the definition of phrasing content to include "option (if it is a descendant of a select element), optgroup (if it is a descendant of a select element)".

If the latter, you need to change the content model if div and span to switch on whether there's an ancestor select element, and if so allow "select element inner content elements". (But still disallow nesting of optgroup and option)

h1 elements are not supposed to be part of the content model, so I implemented the div and span switching by pulling out the content models for option and optgroup and using them in div and span.

[annevk]

This could use some examples. Or are we adding those as part of another PR?

[josepharhar]

This could use some examples. Or are we adding those as part of another PR?

I started a follow up here: https://github.com/whatwg/html/compare/main...josepharhar:html:selectexamples?expand=1

[scottaohara]

This could use some examples. Or are we adding those as part of another PR?

I started a follow up here: https://github.com/whatwg/html/compare/main...josepharhar:html:selectexamples?expand=1

thanks @josepharhar - give me a shout when these are finished, and i can help review and/or add on as need be.

[josepharhar]

In order to resolve the remaining two open comment threads, I added notes about the content model:

• 473ca72
• Update content model for customizable select #10586 (comment)
• Update content model for customizable select #10586 (comment)

I originally had notes about the content model which were placed directly after the content model itself, but I was told not to do that and to put the notes where the prose about the content model is. I'm not sure where such prose exists, so I just added the notes to the very end of the option element and select element sections: #10586 (comment)

[domfarolino]

It looks like everything has been addressed with this PR for a bit now. The contents look good to me, thanks for resolving the last two bits in #10586 (comment) @josepharhar and adding more detail to the commit message in the OP.

I'll plan on merging this towards the end of next week, provided the one nit I found gets resolved and there are no further substantial reviews.

[annevk]

#10633 seems to expect that the select element can have a button element child. Shouldn't that be described here? Is that PR going to be changed and rebased after this lands? It would be good to see the overall plan here.

[josepharhar]

This PR lets the select element have a button child, and the <selectedcontent> PR lets selectedcontent be put inside the button element. Besides merging this one before the selectedcontent PR, what changes do you think should be made?

[annevk]

I see, the button element is handled outside this list.

[annevk]

This presupposes a feature that doesn't exist. Can we solve this differently? Perhaps we can forcibly make this not a submit button and also reflect that in the type getter?

[josepharhar]

Yes, we could easily solve this differently by just saying that the first child <button> is inert instead of putting that in the UA stylesheet.

Inertness helps more than just making the button not a submit button, such as ensuring accessibility by not allowing nested interactive content. I could also forcibly make this not a submit button, but in practice that doesn't matter if the button is inert.

What do you think?