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

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

source

josepharhar · 2024-12-09T23:44:52Z

I just added a "disabled" concept to help prevent infinite loops during cloning due to putting a selectedcontent element inside multiple select elements, another selectedcontent element, or an option element.

josepharhar · 2024-12-11T18:02:28Z

I made the select.value and select.selectedIndex setters trigger cloning to follow this resolution: openui/open-ui#1119 (comment)

dbaron

A few comments from looking at parts of this:

source

josepharhar · 2024-12-16T21:39:14Z

In response to feedback from @dbaron, I made the one selectedcontent element which receives updates be the first one in tree order instead of the first one to be inserted. I also removed the select descendant selectedoption elements list.

https://chromium-review.googlesource.com/c/chromium/src/+/6043186/comment/943643d9_9117fc4d/

Since we are only planning to support one <selectedcontent> element in <select>, this patch only performs a clone into the first <selectedcontent> in tree order. This is in response to feedback here: whatwg/html#10633 (comment) This patch also removes the logic which clears <selectedcontent> elements when they are removed/disconnected. Change-Id: I1580ec9f12df463d1f5134905e3e527cfefa694d

Since we are only planning to support one <selectedcontent> element in <select>, this patch only performs a clone into the first <selectedcontent> in tree order. This is in response to feedback here: whatwg/html#10633 (comment) This patch also removes the logic which clears <selectedcontent> elements when they are removed/disconnected. Change-Id: I1580ec9f12df463d1f5134905e3e527cfefa694d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6043186 Reviewed-by: David Baron <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1399301}

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

[html-aam] 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

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

use post-connection steps

e268b44

hsivonen mentioned this pull request Dec 4, 2024

Relax <select> parser mozilla/standards-positions#1086

Closed

zcorpan mentioned this pull request Dec 9, 2024

HTML selectedcontent element mozilla/standards-positions#1142

Open

josepharhar added 2 commits December 9, 2024 15:23

Merge branch 'main' into selectedoption

c016a74

Add disabled concept

f0984d3

Make value and selectedIndex setters trigger cloning

d8a05e5

josepharhar mentioned this pull request Dec 11, 2024

select: Should <selectedoption> update when selecting the already-selected option openui/open-ui#1119

Closed

dbaron reviewed Dec 13, 2024

View reviewed changes

source Outdated Show resolved Hide resolved

source Show resolved Hide resolved

Only update first selectedcontent in tree order

4126c04

josepharhar added 5 commits December 16, 2024 13:40

fix variable names

42ef681

more variable names

961fee3

Remove removal steps

999a14a

https://chromium-review.googlesource.com/c/chromium/src/+/6043186/comment/943643d9_9117fc4d/

use more <code>

4a175ce

Run more updates on insertion and removal

730b52f

chromium-wpt-export-bot mentioned this pull request Dec 20, 2024

Only update first appended <selectedcontent> element web-platform-tests/wpt#49804

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

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

josepharhar commented Dec 9, 2024

josepharhar commented Dec 11, 2024

dbaron left a comment

josepharhar commented Dec 16, 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

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

josepharhar commented Dec 9, 2024

josepharhar commented Dec 11, 2024

dbaron left a comment

Choose a reason for hiding this comment

josepharhar commented Dec 16, 2024

Define the `<selectedcontent>` element #10633

Define the `<selectedcontent>` element #10633

josepharhar commented Sep 18, 2024 •

edited by pr-preview bot

Loading