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.

The timing of cloning has been discussed here:
#10520

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

josepharhar · 2024-11-04T18:27:25Z

I just made some changes:

Renamed from <selectedoption> to <selectedcontent> based on the resolution in select: Naming of <selectedoption> openui/open-ui#1112
Stopped observing mutations within the selected <option> and replaced with <option> end tag parser cloning based on WHATNOT conversation and discussions in Timing of cloning for the <selectedoption> element #10520 and resolution in select: Should <selectedoption> respond to mutations in the selected <option> openui/open-ui#825 (comment)

annevk · 2024-11-08T13:02:32Z

source

@@ -53198,6 +53201,8 @@ You cannot submit this form when the field is incorrect.</samp></pre>
   <dd><span>Phrasing content</span>, but there must be no <span>interactive content</span>
   descendant and no descendant with the <code data-x="attr-tabindex">tabindex</code> attribute
   specified.</dd>
+   <dd>If the element is the first child of a <code>select</code> element, then it may have zero or
+   one <code>selectedcontent</code> element.</dd>


This does not seem accurate as it may also have other content in such cases, right? Otherwise, what would be the point of this element.

Yes, the previous line about phrasing content also applies so that you can have phrasing content and a selectedcontent element. I added the word "also" to make this more clear. I could also combine this with the previous <dd>, what do you think?

I think in element definitions thus far the dd elements are mutually exclusive. Not additive.

Ok, I combined it with the above dd

source

annevk · 2024-11-08T13:06:15Z

source

+    <p>then for each <var>selectedcontent</var> of <var>option</var>'s <span>option element
+    ancestor select</span>'s <span>select descendant selectedcontent elements</span>, run
+    <span>clone an option into a selectedcontent</span> given <var>option</var> and
+    <var>selectedcontent</var>.</p>


If we only support a single selectedcontent element, why do this?

It isn't my goal to support multiple selectedcontent elements, and I don't know of a use case for multiple.

I like maintaining a list of descendant selectedcontent elements because it avoids the need to traverse through all the descendants of the select element to find another selectedcontent element in the case that a selectedcontent element is removed.

Now that I think about it, I'm probably OK with just performing a clone into the first selectedoption element in this list. I updated the text to take the first element from the list and added logic in some other places to make sure that only the first inserted selectedcontent element is kept up to date.

source

annevk · 2024-11-08T13:09:27Z

source

+  <p>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
+  <code>option</code> element.</p>


I worry that implementers will look at this and not implement the actual algorithm. Perhaps we can make this web developer edition only or turn it into a note or something?

I added the w-dev attribute to the <p>. How does that look?

source

domfarolino

Nothing major except I'm concerned about using selectedcontent element's insertion steps instead of post-connection steps. This is because I believe the steps as currently specified can run script, and script must not run during an element's insertion steps.

source

domfarolino · 2024-11-10T21:38:15Z

source

+
+   <li><p><span data-x="list append">Append</span> <var>selectedcontent</var> to
+   <var>nearestSelectAncestor</var>'s <span>select descendant selectedcontent
+   elements</span>.</p></li>


I guess this is related to Anne's question above, but do we support multiple selectedcontent elements or no?

In response to that comment I added logic to only support one selectedcontent element, but I still want to keep this list in order to prevent adding even more logic

domfarolino · 2024-11-10T21:41:57Z

source

+   <var>insertedNode</var>.</p></li>
+
+   <li><p>Otherwise, run <span>clone an option into a selectedcontent</span> given <var>option</var>
+   and <var>insertedNode</var>.</p></li>


Hmm, this scares me a bit! You're calling the "clone an option" algorithm from inside the selectedcontent's insertion steps, but these steps must not run script, yet the "clone an option" algorithm can run script, IIUC, because of the "replace all" call.

Given that, I'm actually thinking we should run all of these steps not inside the selected content insertion steps, but maybe its post-connection steps instead — those can run script. A test for this would be great, to confirm my suspicion. It might require some tricks to clone a script that will run during the "clone an option" algorithm.

Sure I'm happy to do this. Do you know how post-connection steps are implemented in chromium?

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

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

add parser cloning

4960a77

josepharhar changed the title ~~Define the <selectedoption> element~~ Define the <selectedcontent> element Nov 4, 2024

annevk added the topic: select The <select> element label Nov 8, 2024

annevk reviewed Nov 8, 2024

View reviewed changes

domfarolino reviewed Nov 10, 2024

View reviewed changes

josepharhar added 5 commits November 11, 2024 11:59

improve things

10d1a14

only update first inserted selectedoption

1ee134d

some nits

ec5244b

improve name of option element ancestor select

9463f7e

more nits

02b8cde

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

josepharhar commented Nov 4, 2024

annevk Nov 8, 2024

josepharhar Nov 11, 2024

annevk Nov 12, 2024

josepharhar Nov 22, 2024

annevk Nov 8, 2024

josepharhar Nov 22, 2024

annevk Nov 8, 2024

josepharhar Nov 22, 2024

domfarolino left a comment

domfarolino Nov 10, 2024

josepharhar Nov 22, 2024

domfarolino Nov 10, 2024

josepharhar Nov 22, 2024

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

josepharhar commented Nov 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

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

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 `<selectedcontent>` element #10633

Define the `<selectedcontent>` element #10633

josepharhar commented Sep 18, 2024 •

edited by pr-preview bot

Loading