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.

annevk · 2024-11-08T13:03:49Z

source

@@ -53511,6 +53516,9 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
  element, and all the <code>option</code> element children of all the <code>optgroup</code> element
  children of the <code>select</code> element, in <span>tree order</span>.</p>

+  <p>Every <code>select</code> element has <dfn>select descendant selectedcontent elements</dfn>,


I don't like the repetition of the class name in its member. I would also continue to markup selectedcontent I think.

Ok, I changed it to descendant <code>selectedcontent</code> elements.

annevk · 2024-11-08T13:04:18Z

source

+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>option</var>'s <span
+    data-x="ancestor">ancestors</span>:</p>


You need to define ordering here.

I think I would also express the ordering in the name of this algorithm. Maybe something like:

To get the <dfn>option element's nearest select ancestor</dfn>

And I think I would markup option and select personally (similar to what Anne suggested further above regarding selectedcontent).

Also related: #10633 (comment) (regarding ordering of "select" and "ancestor", which is a nit I don't feel that strongly about).

I don't think that's sufficient to define ordering for the iteration though. It needs to be part of the iteration somehow. cc @zcorpan

As I mentioned in at least one of the other PRs, I don't know what would be the best way to do this. I have seen other text add "in tree order" to the end of stuff like this to indicate ordering, but I think that "in tree order" might be the wrong order because I want to start at the parent and then walk up the tree.

I could add "starting at option's parent node"

Yeah that's why I said "also"

Or I could replace the "for each" loop with a while loop that manually updates the variable like this: https://html.spec.whatwg.org/multipage/interactive-elements.html#ancestor-details-revealing-algorithm

You could say "in reverse tree order".

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?

annevk · 2024-11-08T13:08:17Z

source

+  <code>select</code>'s <code>button</code>, with alternate rendering based on different selectors
+  in the author's stylesheet.</p>


select element's button element.

As this should describe the semantics, I don't think we should discuss style sheets. That seems more suitable for an example.

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?

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

source

+  <code>option</code> element.</p>
+
+  <p><code>selectedcontent</code> elements become associated with <code>select</code> elements when
+  the <code>selectedcontent</code> is a <span>descendant</span> of the <code>select</code>.</p>


a select element*

(but this also doesn't seem entirely true as their parent has to be button and the parent of the button has to be a select)

annevk · 2024-11-08T13:11:20Z

source

+
+   <li>
+    <p>For each <var>child</var> of <var>option</var>'s <span
+    data-x="concept-tree-child">children</span>:</p>


I think you need to specify order.

Hmm, I don't know? The children member is an ordered set, and I think we can just iterate over ordered sets normally, right? Just like the children DOM getter doesn't specify the order of the collection returned: https://dom.spec.whatwg.org/#dom-parentnode-children.

Oh right. I forgot I made that change at some point and was thinking about an earlier definition of child.

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.

domfarolino · 2024-11-10T21:09:49Z

source

+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>option</var>'s <span
+    data-x="ancestor">ancestors</span>:</p>


I think I would also express the ordering in the name of this algorithm. Maybe something like:

To get the <dfn>option element's nearest select ancestor</dfn>

And I think I would markup option and select personally (similar to what Anne suggested further above regarding selectedcontent).

Also related: #10633 (comment) (regarding ordering of "select" and "ancestor", which is a nit I don't feel that strongly about).

domfarolino · 2024-11-10T21:21:34Z

source

+
+   <li>
+    <p>For each <var>child</var> of <var>option</var>'s <span
+    data-x="concept-tree-child">children</span>:</p>


Hmm, I don't know? The children member is an ordered set, and I think we can just iterate over ordered sets normally, right? Just like the children DOM getter doesn't specify the order of the collection returned: https://dom.spec.whatwg.org/#dom-parentnode-children.

domfarolino · 2024-11-10T21:24:40Z

source

+    </ol>
+   </li>
+
+   <li><p>Let <var>convertedNode</var> be the result of <span>convert nodes into a node</span> given


nit: this feels like it should be the result of running or the result of <span> converting

domfarolino · 2024-11-10T21:30:54Z

source

+    </ol>
+   </li>
+
+   <li><p>Let <var>convertedNode</var> be the result of <span>convert nodes into a node</span> given


Maybe for readability/clarity this variable could be documentFragment?

domfarolino · 2024-11-10T21:31:19Z

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>SelectedContent</var> before null.</p></li>


Suggested change

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

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

domfarolino · 2024-11-10T21:36:51Z

source

+  <ol>
+   <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>


Suggested change

order</span></p></li>

order</span>.</p></li>

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?

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.

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

improve things

10d1a14

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

annevk Nov 8, 2024

josepharhar Nov 11, 2024

annevk Nov 8, 2024

domfarolino Nov 10, 2024

annevk Nov 11, 2024

josepharhar Nov 11, 2024

domfarolino Nov 11, 2024

josepharhar Nov 11, 2024

annevk Nov 12, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

domfarolino Nov 10, 2024

annevk Nov 11, 2024

domfarolino left a comment

domfarolino Nov 10, 2024

domfarolino Nov 10, 2024

domfarolino Nov 10, 2024

domfarolino Nov 10, 2024

domfarolino Nov 10, 2024

domfarolino Nov 10, 2024

domfarolino Nov 10, 2024

domfarolino Nov 10, 2024

		<code>select</code>'s <code>button</code>, with alternate rendering based on different selectors
		in the author's stylesheet.</p>

	<var>SelectedContent</var> before null.</p></li>
	<var>selectedcontent</var> before null.</p></li>

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

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

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

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