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.

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.

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.

annevk · 2024-11-08T13:05:25Z

source

+
+  <p>Whenever an <code>option</code> <var>option</var>'s <span
+  data-x="concept-option-selectedness">selectedness</span> is set to true, run <span>maybe clone an
+  option into selectedcontent</span> given <var>option</var>.</p>


I don't think we should have behavior triggering of selectedness getting changed. That's very weird.

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.

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

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

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

annevk Nov 8, 2024

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

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

Define the `<selectedcontent>` element #10633

Define the `<selectedcontent>` element #10633

josepharhar commented Sep 18, 2024 •

edited by pr-preview bot

Loading