Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Complete draft spec for customizable <select> #10548

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

josepharhar
Copy link
Contributor

@josepharhar josepharhar commented Aug 5, 2024

This is a complete draft spec for customizable <select> as proposed here

I don't intend to merge this PR, but instead to break off pieces of it and make PRs for those. However, feedback is greatly appreciated.


💥 Error: Wattsi server error 💥

PR Preview failed to build. (Last tried on Sep 12, 2024, 10:07 PM UTC).

More

PR Preview relies on a number of web services to run. There seems to be an issue with the following one:

🚨 Wattsi Server - Wattsi Server is the web service used to build the WHATWG HTML spec.

🔗 Related URL

Parsing MDN data...
Parsing...
Generating HTML variant...
Error: missing <dfn> for topic "option removal steps" explicitly from <span> element containing "option      removal steps"; previous heading contents are "2.1.4 DOM trees"
Error count: 1
Saving index-html
Splitting...
Saving index.html
Saving introduction.html
Saving infrastructure.html
Saving common-microsyntaxes.html
Saving urls-and-fetching.html
Saving common-dom-interfaces.html
Saving structured-data.html
Saving dom.html
Saving semantics.html
Saving sections.html
Saving grouping-content.html
Saving text-level-semantics.html
Saving links.html
Saving edits.html
Saving embedded-content.html
Saving images.html
Saving iframe-embed-object.html
Saving media.html
Saving image-maps.html
Saving embedded-content-other.html
Saving tables.html
Saving forms.html
Saving input.html
Saving form-elements.html
Saving form-control-infrastructure.html
Saving interactive-elements.html
Saving scripting.html
Saving canvas.html
Saving custom-elements.html
Saving semantics-other.html
Saving microdata.html
Saving interaction.html
Saving dnd.html
Saving popover.html
Saving browsers.html
Saving nav-history-apis.html
Saving document-sequences.html
Saving browsing-the-web.html
Saving document-lifecycle.html
Saving webappapis.html
Saving dynamic-markup-insertion.html
Saving timers-and-user-prompts.html
Saving system-state.html
Saving imagebitmap-and-animations.html
Saving comms.html
Saving server-sent-events.html
Saving web-messaging.html
Saving workers.html
Saving worklets.html
Saving webstorage.html
Saving syntax.html
Saving parsing.html
Saving named-characters.html
Saving xhtml.html
Saving rendering.html
Saving obsolete.html
Saving iana.html
Saving indices.html
Saving references.html
Saving acknowledgements.html
Generating DEV variant...
Splitting...
Saving index.html
Saving introduction.html
Saving infrastructure.html
Saving common-microsyntaxes.html
Saving urls-and-fetching.html
Saving common-dom-interfaces.html
Saving structured-data.html
Saving dom.html
Saving semantics.html
Saving sections.html
Saving grouping-content.html
Saving text-level-semantics.html
Saving links.html
Saving edits.html
Saving embedded-content.html
Saving images.html
Saving iframe-embed-object.html
Saving media.html
Saving image-maps.html
Saving embedded-content-other.html
Saving tables.html
Saving forms.html
Saving input.html
Saving form-elements.html
Saving form-control-infrastructure.html
Saving interactive-elements.html
Saving scripting.html
Saving canvas.html
Saving custom-elements.html
Saving semantics-other.html
Saving microdata.html
Saving interaction.html
Saving dnd.html
Saving popover.html
Saving browsers.html
Saving nav-history-apis.html
Saving document-sequences.html
Saving browsing-the-web.html
Saving document-lifecycle.html
Saving webappapis.html
Saving dynamic-markup-insertion.html
Saving timers-and-user-prompts.html
Saving system-state.html
Saving imagebitmap-and-animations.html
Saving comms.html
Saving server-sent-events.html
Saving web-messaging.html
Saving workers.html
Saving worklets.html
Saving webstorage.html
Saving syntax.html
Saving named-characters.html
Saving xhtml.html
Saving obsolete.html
Saving indices.html
Saving references.html
Saving acknowledgements.html
Generating SNAP variant...
Error: missing <dfn> for topic "option removal steps" explicitly from <span> element containing "option      removal steps"; previous heading contents are "2.1.4 DOM trees"
Error count: 1
Saving index-snap

If you don't have enough information above to solve the error by yourself (or to understand to which web service the error is related to, if any), please file an issue.

source Show resolved Hide resolved
source Show resolved Hide resolved
@josepharhar
Copy link
Contributor Author

FYI: I am likely going to remove the author-provided datalist and fallback UA button in this PR soon based on recent discussions, which will likely reduce the number of changes and complexity.

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

Fixes whatwg#10317
source Outdated
@@ -53203,7 +53306,8 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>phrasing content</span> is expected.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd>Zero or more <code>option</code>, <code>optgroup</code>, <code>hr</code>, and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
<dd>Zero or more <span>select element inner content elements</span>.</dd>
<dd>Zero or one child <code>button</code>.</dd>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to this content model, the example of following is conforming.
But is that OK?
One or more "option" element should be required as a descendant of "select" element.

Example

<select>
  <div>unselectable-text-1</div>
  <span>unselectable-text-2</span>
  <noscript>unselectable-text-3</noscript>
  <hr>
  <img src="unselectable-image-1.jpg">
  <svg><text>unselectable-image-2</text></svg>
</select>

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch.

source Outdated
&lt;option>Cat&lt;/option>
&lt;option>Dog&lt;/option>
&lt;/datalist>
&lt;/select></code></pre>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "datalist" element should be added to "Select element inner content elements" category.

source Outdated
@@ -53203,7 +53306,8 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>phrasing content</span> is expected.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd>Zero or more <code>option</code>, <code>optgroup</code>, <code>hr</code>, and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
<dd>Zero or more <span>select element inner content elements</span>.</dd>
<dd>Zero or one child <code>button</code>.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "selectedoptionelement" attribute should be added.

@@ -55816,6 +56196,115 @@ interface <dfn interface>HTMLLegendElement</dfn> : <span>HTMLElement</span> {

</div>

<h4>The <dfn element><code>selectedoption</code></dfn> element</h4>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there no begining block(list of "Categories:", "Contexts in which this element can be used:", "Content model:", "Tag omission in text/html:", "Content attributes:", "Accessibility considerations:" & "DOM interface:") in section of the selectedoption element?

source Outdated

<li><code>noscript</code> elements.</li>

<li><code>div</code> elements.</li>
Copy link

@mtrootyy mtrootyy Aug 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following sentences should be added to the bigining block of section of the div element.

Categories:
    ......
   +Select element inner content elements.

Contexts in which this element can be used:
    ......
   +As a child of a select element.
   +As a child of a optgroup element.
   +As a child of a option element.

If the div element may have option element & optgroup element as child, that fact should be added to "Content model:".

Other element of "Select element inner content elements" should be also.

@josepharhar josepharhar force-pushed the selectcomplete branch 2 times, most recently from 939fe27 to 04e9fcd Compare September 10, 2024 22:01
This patch makes the parser allow additional tags in <select> besides
<option>, <optgroup>, and <hr>, mostly by removing the "in select" and
"in select in table" parser modes.

In order to replicate the behavior where opening a <select> tag within
another open <select> tag inserts a </select> close tag, a traversal
through the stack of open elements was added which I borrowed from the
<button> part of the parser.

This will need test changes to be implemented in html5lib.

Fixes whatwg#10310
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

3 participants