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

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

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

josepharhar · 2025-05-05T14:01:21Z

Thanks Scott! I added a note here: bcd9669

These were requested here: whatwg/html#10633 (comment) There are failing test expectations added for the virtual test suites where CustomizableSelect is disabled, where the <selectedcontent> element is not enabled. Change-Id: Ib2906a5c8d70ae5ea5cccb6d899c79b29ea45e5e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6471702 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Dominic Farolino <[email protected]> Cr-Commit-Position: refs/heads/main@{#1458866}

…content>, Automatic update from web-platform-tests Add MutationObserver tests for <selectedcontent> These were requested here: whatwg/html#10633 (comment) There are failing test expectations added for the virtual test suites where CustomizableSelect is disabled, where the <selectedcontent> element is not enabled. Change-Id: Ib2906a5c8d70ae5ea5cccb6d899c79b29ea45e5e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6471702 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Dominic Farolino <[email protected]> Cr-Commit-Position: refs/heads/main@{#1458866} -- wpt-commits: 23b9c427c9115a1b40b95e4e4099c353a985c958 wpt-pr: 52476 Differential Revision: https://phabricator.services.mozilla.com/D249370

…content>, Automatic update from web-platform-tests Add MutationObserver tests for <selectedcontent> These were requested here: whatwg/html#10633 (comment) There are failing test expectations added for the virtual test suites where CustomizableSelect is disabled, where the <selectedcontent> element is not enabled. Change-Id: Ib2906a5c8d70ae5ea5cccb6d899c79b29ea45e5e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6471702 Commit-Queue: Joey Arhar <jarharchromium.org> Reviewed-by: Dominic Farolino <domchromium.org> Cr-Commit-Position: refs/heads/main{#1458866} -- wpt-commits: 23b9c427c9115a1b40b95e4e4099c353a985c958 wpt-pr: 52476 Differential Revision: https://phabricator.services.mozilla.com/D249370 UltraBlame original commit: c92c496cf3b9513fb0279fdb8afa468388d866ff

estelle · 2025-05-20T21:44:02Z

Per mdn/content#39411; "Dynamic modifications to the selected <option> element's content made after the <select> element has been created are not automatically cloned to the <selectedcontent> element, and must be manually updated by the developer."

This has usability and security risks. If the option can be updated without the content of the <selectedcontent> updating along with it without JS, this has the likelihood of leading to broken forms. It's also a security risk as the user may submit a form with an unintended value that is not visible due to malicious code.

We don't want to add anything to the web platform that may potentially break things, make a form control less accessible, or add any vulnerabilities.

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

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

source Show resolved Hide resolved

source Show resolved Hide resolved

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

add note about label attribute

bcd9669

chromium-wpt-export-bot mentioned this pull request May 12, 2025

Add MutationObserver tests for <selectedcontent> web-platform-tests/wpt#52476

Merged

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

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

scottaohara commented Apr 17, 2025

josepharhar commented May 5, 2025

estelle commented May 20, 2025

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

Choose a reason for hiding this comment

josepharhar commented Mar 24, 2025

annevk Apr 8, 2025

Choose a reason for hiding this comment

josepharhar Apr 8, 2025

Choose a reason for hiding this comment

annevk Apr 8, 2025

Choose a reason for hiding this comment

josepharhar Apr 8, 2025

Choose a reason for hiding this comment

scottaohara commented Apr 8, 2025

scottaohara commented Apr 17, 2025

josepharhar commented May 5, 2025

estelle commented May 20, 2025

Define the `<selectedcontent>` element #10633

Define the `<selectedcontent>` element #10633

josepharhar commented Sep 18, 2024 •

edited by pr-preview bot

Loading