Define the `<selectedcontent>` element #10633

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

The <selectedcontent> 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.

Some details on the cloning behavior, which were decided on in order to always make sure that the selectedcontent element is up to date and in order to reduce developer confusion:

Cloning is done with an algorithm similar to the Node.cloneNode() function.
Cloning is done synchronously at these times:
- When an </option> end tag is parsed during HTML parsing.
- A selectedcontent element is inserted, during its post-connection steps.
- Immediately before input and change events are fired on a select element.
- When the select.selectedIndex IDL is assigned to.

Fixes #10520

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

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

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/selectedcontent.tentative.html
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.)

/form-control-infrastructure.html ( diff )
/form-elements.html ( diff )
/index.html ( diff )
/indices.html ( diff )
/infrastructure.html ( diff )
/interactive-elements.html ( diff )
/parsing.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.

source

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

source

domfarolino

OK I think this LGTM!

I would like some clarification in the OP as to whether #10520 is fully resolved and fixed by this PR. And we'll need to check the rest of the boxes in the OP and fill out the needed information. I'll add the DNM label until these are satisfied.

source

This sort of makes us match the spec more closely: whatwg/html#10633 (comment) When there is a <selectedcontent> inside nested <select>s, we were adding the <selectedcontent> to all <select>'s descendant selectedcontent element lists. This was probably fine but it also wasn't removed properly in HTMLSelectedContentElement::RemovedFrom, so I'm adding an early return to prevent adding the <selectedcontent> to the upper <select>'s list of descendant selectedcontent elements. Change-Id: I1591ce192ec3033f32de319e4cb5431aec19cfa3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6196578 Reviewed-by: Dominic Farolino <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1412608}

annevk · 2025-02-28T13:47:10Z

source

+   <li><p>Let <var>firstMatchingOption</var> be null.</p></li>
+
+   <li>
+    <p>For each <var>option</var> in the <code>select</code>'s <span


Suggested change

<p>For each <var>option</var> in the <code>select</code>'s <span

<p>For each <var>option</var> of <span>this</span>'s <span

It's only partially done it seems. in -> of is also important.

Thanks, my bad. Should be fixed now.

I wish the "commit suggestion" button actually worked for these PRs

source

domfarolino

This still LGTM; there are two things I'd like to see:

@josepharhar: could you address Define the <selectedcontent> element #10633 (review) by adding some detail to the commit message in the OP, especially around the cloning strategy we ultimately went with and how it relates to the discussion in Timing of cloning for the <selectedoption> element #10520?
@scottaohara: how do you feel about Add selectedcontent element and allowances for 'button' part of select w3c/html-aria#528 and [html-aam] Addition: selectedcontent element w3c/aria#2344? Do you think those are ready to land at this point, and are just waiting on this PR?

Once I get some clarity on these two I think we're ready to land this; I will hold off until the end of the week.

source

josepharhar · 2025-03-24T16:13:08Z

@josepharhar: could you address Define the <selectedcontent> element #10633 (review) by adding some detail to the commit message in the OP, especially around the cloning strategy we ultimately went with and how it relates to the discussion in Timing of cloning for the <selectedoption> element #10520?

Done. Copying into this comment too in case the commit message gets clobbered by the thing that updates the commit message with the build of the PR:

Some details on the cloning behavior, which were decided on in order to always make sure that the selectedcontent element is up to date and in order to reduce developer confusion:

Cloning is done with an algorithm similar to the Node.cloneNode() function.
Cloning is done synchronously at these times:
- When an </option> end tag is parsed during HTML parsing.
- A selectedcontent element is inserted, during its post-connection steps.
- Immediately before input and change events are fired on a select element.
- When the select.selectedIndex IDL is assigned to.

source

annevk · 2025-04-08T16:24:54Z

source

+
+  <p w-dev>Every time the selected <code>option</code> of a <code>select</code> switches from one
+  option to another, the <code>selectedcontent</code> element removes all of its children and
+  replaces them with a new cloned copy of the DOM structure of the <code>select</code>'s selected


"cloned copy" is a pleonasm.

Ok, I removed "cloned". How does it look now?

annevk · 2025-04-08T16:25:54Z

source

+
+    <ol>
+     <li><p>Let <var>childClone</var> be the result of running <span
+     data-x="concept-node-clone">clone</span> given <var>child</var>, null, true.</p></li>


and true?

But also, I don't think this works anymore now that concept-node-clone has named arguments?

Thanks, I changed it to use named arguments. How does it look?

source

scottaohara · 2025-04-08T16:51:07Z

@domfarolino sorry, I missed your mention of me since I've already been mentioned in this thread, github doesn't make it clear when someone has been re-mentioned.

the html aam (2344) PR is waiting on this to merge. It hasn't had any updates since I made some wording changes to a note in February. There are various other HTML AAM PRs related to customizable select which are also ready to go once everything is ready to merge into the HTML spec.

the aria in html pr (528) is essentially ready to go as well. No more spec updates needed, just some issues to file against conformance checkers.

source

annevk · 2025-04-16T14:04:21Z

source

+   <li><p><span data-x="concept-node-remove-ext">Remove</span> all <span
+   data-x="concept-tree-child">children</span> of <var>selectedcontent</var>, in <span>tree
+   order</span>.</p></li>
+  </ol>


I think we want to use replace all with nothing here, no? It would be good to write some mutation observer tests for this.

Thanks, I changed it to replace all with null. I am working on mutation observer tests.

scottaohara · 2025-04-17T21:15:02Z

@josepharhar not sure if this is the PR to comment on or not, but per our chat discussion it's probably worth calling out that while <option label=foo> can be used with the customizable select, and will render a visible label for the option in the select's popup - if selected nothing will be returned to the selectedcontent element - since that works by cloning the descendants of the option, and in this care there are none.

Someone can still benefit from broader styling capabilities and still define option element label text using the attribute if their customized select does not contain a button part (and thus no selectedcontent element). Maybe it makes sense to call this out? that way, if someone does attempt to use label attributes when defining their options, it's made clear "if you want to do this, then you shouldn't use the button part/selectedconent elements. but, to have greater control, use child content of the option to define your labels, which will also allow for more styling capabilities for represented the selected content in the select's collapsed state.

or you know... word smith as you see fit

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

Closed

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 selectedcontent element and allowances for 'button' part of select w3c/html-aria#528

Open

Add selectedoption element w3c/html-aam#566

Closed

add dl

1aece11

scottaohara mentioned this pull request Sep 27, 2024

[html-aam] Addition: selectedcontent element w3c/aria#2344

Open

index

a1bd1e8

annevk reviewed Oct 4, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

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

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

scottaohara reviewed Nov 1, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

scottaohara reviewed Nov 1, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

josepharhar added 6 commits November 4, 2024 09:21

add clear a selectedoption

c846c3e

nits

bef82d0

allow no selectedoption

daabd98

Merge remote-tracking branch 'upstream/main' into selectedoption

bf2b5c5

dont track mutations

8863966

rename to selectedcontent

17ac232

josepharhar and others added 4 commits January 23, 2025 14:54

dom comments

7668dde

more dom comments

be8c488

remove pre-insertion validity

6929058

Remove ensure pre-insertion DOM link

51f0f41

domfarolino approved these changes Jan 28, 2025

View reviewed changes

source Outdated Show resolved Hide resolved

source Outdated Show resolved Hide resolved

domfarolino added the do not merge yet Pull request must not be merged per rationale in comment label Jan 28, 2025

fix selectedIndex setter and algorithm declaration

6f251fb

remove run these steps

77f9886

captainbrosset mentioned this pull request Jan 30, 2025

Early customizable select feature web-platform-dx/web-features#2301

Merged

rajsite mentioned this pull request Feb 18, 2025

Allow ListOption to contain complex content ni/nimble#1135

Open

1 task

annevk reviewed Feb 28, 2025

View reviewed changes

josepharhar and others added 2 commits February 28, 2025 10:30

use this instead of select

26d3281

Run specfmt

134f651

domfarolino approved these changes Mar 24, 2025

View reviewed changes

source Outdated Show resolved Hide resolved

use stack-pop

f6be49e

annevk reviewed Apr 8, 2025

View reviewed changes

annevk mentioned this pull request Apr 8, 2025

Update content model for customizable select #10586

Open

5 tasks

josepharhar added 6 commits April 8, 2025 10:53

nits

1a8d313

used named arguments for node cloning algorithm

1a621e1

more nits

117ca06

Merge branch 'main' into selectedoption

263c54b

fix subtree argument reference

27ff6b7

move option end tag steps out of in select mode

0430604

annevk reviewed Apr 16, 2025

View reviewed changes

josepharhar added 2 commits April 16, 2025 14:04

dont use convert nodes into a node

5e62c8c

use replace all instead of removing all

01e1283

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Define the `<selectedcontent>` element #10633

Define the `<selectedcontent>` 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

josepharhar commented Oct 4, 2024

domfarolino left a comment •

edited

Loading

annevk Feb 28, 2025

josepharhar Feb 28, 2025

annevk Apr 8, 2025

josepharhar Apr 8, 2025

domfarolino left a comment

josepharhar commented Mar 24, 2025

annevk Apr 8, 2025

josepharhar Apr 8, 2025

annevk Apr 8, 2025

josepharhar Apr 8, 2025

scottaohara commented Apr 8, 2025

annevk Apr 16, 2025

josepharhar Apr 16, 2025

scottaohara commented Apr 17, 2025

	<p>For each <var>option</var> in the <code>select</code>'s <span
	<p>For each <var>option</var> of <span>this</span>'s <span

Define the <selectedcontent> element #10633

Are you sure you want to change the base?

Define the <selectedcontent> 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

josepharhar commented Oct 4, 2024

domfarolino left a comment • edited Loading

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

domfarolino left a comment

Choose a reason for hiding this comment

josepharhar commented Mar 24, 2025

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

scottaohara commented Apr 8, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

scottaohara commented Apr 17, 2025

Define the `<selectedcontent>` element #10633

Define the `<selectedcontent>` element #10633

josepharhar commented Sep 18, 2024 •

edited by pr-preview bot

Loading

domfarolino left a comment •

edited

Loading