Define base appearance for <select> #10629

josepharhar · 2024-09-16T21:03:12Z

This PR defines the base appearance except for the UA stylesheet for customizable select as proposed in #9799

Base appearance is being defined in CSS here: w3c/csswg-drafts#10691

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/stylable-select/
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 )
/infrastructure.html ( diff )
/references.html ( diff )
/rendering.html ( diff )

annevk

I'm missing the base appearance style sheet?

source

annevk · 2024-11-08T12:23:30Z

source

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


I guess the order technically doesn't matter, but seems good to specify still in case of future changes.

I want it to start at option's parent and go up in the tree from there. How should I specify this?

reverse tree order?

annevk · 2024-11-08T12:23:43Z

source

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


Here the order seems like it actually matters.

I want it to start at option's parent and go up in the tree from there. How should I specify this?

annevk · 2024-11-08T12:25:46Z

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
+  option into select button</span> given <var>option</var>.</p>


This seems weird. Normally changing members doesn't have weird side effects like this.

I moved this to the send select update notifications algorithm

annevk · 2024-11-08T12:26:33Z

source

+
+  <p>When a <code>select</code> is being rendered as a <span>drop-down box</span> with a <span>base
+  appearance</span>, it is expected to render as if it has the following <span>shadow
+  root</span>:</p>


You can't define a shadow root in terms of an HTML syntax fragment.

Ok, I rewrote it without using HTML. How does it look?

annevk · 2024-11-08T12:27:56Z

source

+  HTML:</p>
+
+  <!-- TODO is it OK for me to use <ul>, <li>, and <p> like this even though it isn't an
+  algorithm? -->


I think the problem is really with how you define the shadow root. If you do that differently this will be different too. But you can use lists outside of algorithms for sure.

Ok, I rewrote this and used it to replace the HTML. How does it look?

annevk · 2024-11-08T12:28:27Z

source

+
+  <p>The <span>implicit anchor element</span> of the <span>select popover</span> element is the
+  <code>select</code> element shadow host of the shadow host in which <span>select popover</span>
+  resides.</p>


I can't parse this.

Yeah that was not worded well. I rewrote it, how does it look now?

source

annevk · 2024-11-08T12:30:01Z

source

+
+   <li><p>Set <var>select</var>'s <span>select popover slot</span>'s <span>manually assigned
+   nodes</span> to <var>otherChildren</var>.</p></li>
+  </ol>


Why can't we describe this more similarly to the details element?

Ok, I replaced this algorithm with some prose at the definition of the slot elements to look more like the details element.

josepharhar · 2024-11-11T18:00:13Z

Thanks for the review! I just pushed a lot of changes.

I'm missing the base appearance style sheet?

I have a separate PR for that here: #10670

I can get rid of that PR and include it in this PR if you'd prefer.

annevk · 2024-11-15T11:29:22Z

source

@@ -54363,6 +54374,64 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {

  </div>

+  <p>To get the <dfn>option element ancestor select</dfn> given an <code>option</code>


option element but select without qualifier seems a bit odd. Also option needs code here I think.

And then after the algorithm you just say option without the element qualifier. I think that needs the qualifier too.

annevk · 2024-11-15T11:30:07Z

source

+   <li><p>Return null.</p></li>
+  </ol>
+
+  <p>To <dfn>clone selected option into select button</dfn>, given a <code>select</code> element


This has a similar problem.

annevk · 2024-11-15T11:30:22Z

source

+   <li><p>Let <var>option</var> be the first element of <var>select</var>'s <span
+   data-x="concept-select-option-list">option list</span> whose <span
+   data-x="concept-option-selectedness">selectedness</span> is set to true, if such an element
+   exists, otherwise null.</p></li>


; otherwise null

(see Infra)

annevk · 2024-11-15T11:30:40Z

source

+   data-x="concept-option-selectedness">selectedness</span> is set to true, if such an element
+   exists, otherwise null.</p></li>
+
+   <li><p>Let <var>text</var> be an empty string.</p></li>


the empty string

annevk · 2024-11-15T11:30:59Z

source

+   <var>text</var>.</p></li>
+  </ol>
+
+  <p>The <span>activation behavior</span> of an <code>option</code> <var>option</var> is to run the


option element

smaug---- · 2024-11-19T10:11:05Z

source

+   <var>text</var>.</p></li>
+  </ol>
+
+  <p>The <span>activation behavior</span> of an <code>option</code> <var>option</var> is to run the


In the current Canary, option element selection seems to happen on pointerdown (or is it mousedown, anyhow -down), not when activating
(which is why it took a bit time to figure out why an anchor element inside an option doesn't get activated when clicked).

But click event is still dispatched. It is just dispatched to the common ancestor of the option and whatever happens to be under the pointer when the popup has been closed and pointerup dispatched.

smaug---- · 2024-11-19T10:40:13Z

source

+   <li><p>A <dfn>select button slot</dfn>, which is a <code>slot</code> element. It is appended to
+   the <code>select</code>'s <span>shadow root</span> as the first child. It is expected to take the
+   first child element of the <code>select</code> if the first child element is a
+   <code>button</code>, otherwise the <span>select fallback button text</span>.</p></li>


When testing Canary the select element seems to eat the click event and a button nor selectedcontent inside it get the click. Is that defined somewhere? Hmm, looks like they don't get any pointer/mouse events. Perhaps there is pointer-events: none somewhere, I'm just missing to find that in the PRs?

Ah, the selectedcontent/button case is coming from interactivity: inert;
w3c/csswg-drafts#10857
w3c/csswg-drafts#11178

Define base appearance for <select>

8e17138

josepharhar mentioned this pull request Sep 18, 2024

Customizable <select> element #9799

Open

past mentioned this pull request Oct 24, 2024

Upcoming WHATNOT meeting on 2024-10-24 #10709

Closed

annevk reviewed Nov 8, 2024

View reviewed changes

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

josepharhar mentioned this pull request Nov 11, 2024

[css-ui] UA stylesheet for appearance:base <select> w3c/csswg-drafts#10857

Open

josepharhar added 2 commits November 11, 2024 09:57

rewrote a lot

f8cd659

Merge branch 'main' into selectrendering

9c41826

prevent select button from being default submit button

85b785f

annevk reviewed Nov 15, 2024

View reviewed changes

smaug---- reviewed Nov 19, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Define base appearance for <select> #10629

Define base appearance for <select> #10629

josepharhar commented Sep 16, 2024 •

edited by pr-preview bot

Loading

annevk left a comment

annevk Nov 8, 2024

josepharhar Nov 11, 2024

annevk Nov 15, 2024

annevk Nov 8, 2024

josepharhar Nov 11, 2024

annevk Nov 8, 2024

josepharhar Nov 11, 2024

annevk Nov 8, 2024

josepharhar Nov 11, 2024

annevk Nov 8, 2024

josepharhar Nov 11, 2024

annevk Nov 8, 2024

josepharhar Nov 11, 2024

annevk Nov 8, 2024

josepharhar Nov 11, 2024

josepharhar commented Nov 11, 2024

annevk Nov 15, 2024

annevk Nov 15, 2024

annevk Nov 15, 2024

annevk Nov 15, 2024

annevk Nov 15, 2024

smaug---- Nov 19, 2024 •

edited

Loading

smaug---- Nov 19, 2024

smaug---- Nov 20, 2024

		@@ -54363,6 +54374,64 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {

		</div>

		<p>To get the <dfn>option element ancestor select</dfn> given an <code>option</code>

Define base appearance for <select> #10629

Are you sure you want to change the base?

Define base appearance for <select> #10629

Conversation

josepharhar commented Sep 16, 2024 • edited by pr-preview bot Loading

annevk 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

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

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

smaug---- Nov 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

josepharhar commented Sep 16, 2024 •

edited by pr-preview bot

Loading

smaug---- Nov 19, 2024 •

edited

Loading