Define the `<selectedoption>` element #10633

josepharhar · 2024-09-18T20:57:38Z

The <selectedoption> element is part of the customizable <select> proposal: #9799

It allows authors to declaratively clone the contents of the currently selected <option> of a <select> and style it independently for use in a base appearance <select>'s button.

The timing of cloning has been discussed here:
#10520

The selectedoption element has been discussed generally here: w3c/csswg-drafts#10242

html-aria PR: w3c/html-aria#528
html-aam PR: w3c/html-aam#566

At least two implementers are interested (and none opposed):
- Chrome
- …
Tests are written and can be reviewed and commented upon at:
- https://wpt.fyi/results/html/semantics/forms/the-select-element/customizable-select/selectedoption.tentative.html
Implementation bugs are filed:
- Chromium: …
- Gecko: …
- WebKit: …
MDN issue is filed: …
The top of this comment includes a clear commit message to use.

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

/form-control-infrastructure.html ( diff )
/form-elements.html ( diff )
/index.html ( diff )
/indices.html ( diff )
/infrastructure.html ( diff )
/interactive-elements.html ( diff )

The `<selectedoption>` element is part of the customizable `<select>` proposal: whatwg#9799 It allows authors to declaratively clone the contents of the currently selected `<option>` of a `<select>` and style it independently for use in a base appearance `<select>`'s button. The timing of cloning has been discussed here: whatwg#10520 The selectedoption element has been discussed generally here: w3c/csswg-drafts#10242

annevk · 2024-09-19T07:03:50Z

It seems this is missing a lot of the boilerplate that new elements normally have as well as changes to content models, indexes, etc. See also this checklist at the top of source:

 !   Adding a new element involves editing the following sections:
 !    - section for the element itself
 !    - descriptions of the element's categories
 !    - images/content-venn.svg
 !    - syntax, if it's void or otherwise special
 !    - parser, if it's not phrasing-level
 !    - rendering
 !    - obsolete section
 !    - element, attribute, content model, and interface indices

@josepharhar

I recreated the [original PR](w3c/html-aam#566) by @josepharhar The `<selectedoption>` element is part of the [customizable select feature](whatwg/html#9799) and is being added to HTML [here](whatwg/html#10633). ## Implementation * WPT tests: web-platform-tests/wpt#45096 * Implementations (link to issue or when done, link to commit): * WebKit: TODO * Gecko: TODO * Blink: https://chromium.googlesource.com/chromium/src/+/18b5eac27b14b409503aa8047cf9358082a0e0df Co-authored-by: Joey Arhar @josepharhar

josepharhar · 2024-09-27T17:25:28Z

Thanks!

I added a dl with a bunch of metadata for the element itself.
I didn't include this element in any categories
I didn't update the content-venn image because I didn't add it to any categories.
I didn't update syntax or parsing because it doesn't have any special rules and I didn't implement anything in the HTML parser for this.
I didn't update rendering because I noticed that elements like <div> and <span> don't have sections in there, and selectedoption is supposed to render like those elements.
I didn't update the obsolete section because nothing is becoming obsolete...?
I updated the element and interface indexes

annevk · 2024-10-04T11:17:55Z

This still seems incomplete. Where does the button element indicate this element can be a descendant, for instance? If you don't adjust the categories, you still need to account for how the categories are used.

annevk · 2024-10-04T11:20:17Z

source

+   <li><p>Run <span data-x="dom-parentnode-replacechildren">replaceChildren</span> on
+   <var>selectedOption</var> given <var>nodes</var>.</p></li>


You cannot invoke public API.

Also, per the discussion in #10520 this is not the cloning behavior that's implemented?

this is not the cloning behavior that's implemented?

It was this way before I made it use a MutationObserver. I am planning on reverting that patch in order to support the synchronous timing which was able to get consensus at WHATNOT.

You cannot invoke public API.

Good catch, thanks! I inlined the steps from the dom spec.

josepharhar · 2024-10-04T18:56:50Z

This still seems incomplete. Where does the button element indicate this element can be a descendant, for instance? If you don't adjust the categories, you still need to account for how the categories are used.

Thanks, I updated the content model of the button element

domfarolino · 2024-10-29T14:45:06Z

source

+   <li><p>Let <var>nodes</var> be « ».</p></li>
+
+   <li>
+    <p>If <var>option</var> is not null, then for each <var>child</var> of <var>option</var>'s <span


In the algorithm declaration <var>option</var> is not a nullable type (i.e., an <code>option</code>-or-null). So this part of this condition will never be hit. We can either remove this null check, or if it is intentional, change the algorithm declaration to accept nullable option elements in the manner I described.

It looks like it is intentional for at least one reason, maybe two:

L56014 explicitly passes in null to clear the selected option

L55984: you might be expecting null to be passed in, in the case where we can't find a suitable <option>? I'm not sure. In that case though, I don't think it would follow that we'd just implicitly pass in null as the option.

See my other comment in this review though, indicating that I think we should solve this by not allow this variable to be nullable in this algorithm.

domfarolino · 2024-10-29T14:57:23Z

source

+   <var>nodes</var> and <var>option</var>'s <span>node document</span>.</p></li>
+
+   <li><p><span>Ensure pre-insertion validity</span> of <var>convertedNode</var> into
+   <var>selectedOption</var> before null</p></li>


Suggested change

<var>selectedOption</var> before null</p></li>

<var>selectedOption</var> before null.</p></li>

domfarolino · 2024-10-29T15:01:05Z

source

+
+   <li><p>Run <span>clone an option into a selectedoption</span> given the first <code>option</code>
+   in <var>firstAncestorSelect</var>'s <span data-x="concept-select-option-list">list of
+   options</span> whose <span data-x="concept-option-selectedness">selectedness</span> is true and


Suggested change

options</span> whose <span data-x="concept-option-selectedness">selectedness</span> is true and

options</span> whose <span data-x="concept-option-selectedness">selectedness</span> is true, and

domfarolino · 2024-10-29T15:19:00Z

source

+   <li><p>Let <var>convertedNode</var> be the result of <span>convert nodes into a node</span> given
+   <var>nodes</var> and <var>option</var>'s <span>node document</span>.</p></li>
+
+   <li><p><span>Ensure pre-insertion validity</span> of <var>convertedNode</var> into


At this point, <var>convertedNodes</var> is expected to be null if <var>option</var> is null, right? I think that's the case because if <var>option</var> is null, then "convert nodes into a node" would just return null.

And if <var>convertedNodes</var> is null here, then I think we would always fail the pre-insertion validity check, per its step 4. Basically I think we should just handle the "clear-the-selectedoption" case separately from the "actual clone" case, instead of merging them together and having the clone algorithm accept a null option.

domfarolino · 2024-10-29T15:24:20Z

source

+  <var>selectedoption</var>, are:</p>
+
+  <ol>
+   <li><p>Let <var>firstAncestorSelect</var> be null.</p></li>


This is an ultra nit but I think I would rename this nearestSelectAncestor. The ordering of ancestorSelect feels slightly odd, so I'd suggest selectAncestor, and "nearest" is less ambiguous than "first" (since first is not directional, regarding the list of all ancestors).

domfarolino · 2024-10-29T15:26:38Z

source

+  support <code>selectedoption</code> elements:</p>
+
+  <ol>
+   <li><p>Run <span>maybe clone option into selectedoption</span> given <var>element</var>.</p></li>


Is this necessary if we are already modifying the global insertion and removal steps too?

This was referenced Sep 18, 2024

Timing of cloning for the <selectedoption> element #10520

Open

How to implement and shape API for <selectedoption> element for <select> w3c/csswg-drafts#10242

Open

Customizable <select> element #9799

Open

annevk added addition/proposal New features or enhancements topic: forms labels Sep 19, 2024

josepharhar requested a review from domfarolino September 19, 2024 17:24

YusukeHirao mentioned this pull request Sep 23, 2024

Supporting for <select> and <selectedoption> markuplint/markuplint#2069

Open

This was referenced Sep 27, 2024

Add <selectedoption> element w3c/html-aria#528

Open

Add selectedoption element w3c/html-aam#566

Closed

add dl

1aece11

scottaohara mentioned this pull request Sep 27, 2024

Addition: selectedoption element w3c/aria#2344

Open

index

a1bd1e8

annevk reviewed Oct 4, 2024

View reviewed changes

josepharhar added 2 commits October 4, 2024 11:49

inline replacechildren

c04ca18

update content model of button element

09777e2

domfarolino reviewed Oct 29, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Define the `<selectedoption>` element #10633

Define the `<selectedoption>` element #10633

josepharhar commented Sep 18, 2024 •

edited by pr-preview bot

Loading

annevk commented Sep 19, 2024

josepharhar commented Sep 27, 2024

annevk commented Oct 4, 2024

annevk Oct 4, 2024

josepharhar Oct 4, 2024

josepharhar commented Oct 4, 2024

domfarolino Oct 29, 2024

domfarolino Oct 29, 2024

domfarolino Oct 29, 2024

domfarolino Oct 29, 2024

domfarolino Oct 29, 2024

domfarolino Oct 29, 2024

		<li><p>Run <span data-x="dom-parentnode-replacechildren">replaceChildren</span> on
		<var>selectedOption</var> given <var>nodes</var>.</p></li>

	<var>selectedOption</var> before null</p></li>
	<var>selectedOption</var> before null.</p></li>

	options</span> whose <span data-x="concept-option-selectedness">selectedness</span> is true and
	options</span> whose <span data-x="concept-option-selectedness">selectedness</span> is true, and

Define the <selectedoption> element #10633

Are you sure you want to change the base?

Define the <selectedoption> element #10633

Conversation

josepharhar commented Sep 18, 2024 • edited by pr-preview bot Loading

annevk commented Sep 19, 2024

josepharhar commented Sep 27, 2024

annevk commented Oct 4, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

josepharhar commented Oct 4, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Define the `<selectedoption>` element #10633

Define the `<selectedoption>` element #10633

josepharhar commented Sep 18, 2024 •

edited by pr-preview bot

Loading