Skip to content

Define optgroup base appearance rendering #12201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
josepharhar wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Define optgroup base appearance rendering #12201

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c34b79c
Define optgroup base appearance rendering
josepharhar Feb 25, 2026
c33f02c
Merge branch 'main' into optgrouprendering
josepharhar Mar 3, 2026
5fd0dc6
optgroup legend slot
josepharhar Mar 3, 2026
dacd338
ua styles for label holder
josepharhar Mar 3, 2026
919c0ab
option shadow tree and label attribute
josepharhar Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 32 additions & 8 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148268,8 +148268,33 @@ progress { appearance: auto; }</code></pre>
<p>The <span>'::checkmark'</span> pseudo-element only applies to <code>option</code> elements
which are <span data-x="option-base-appearance">being rendered with base appearance</span>.</p>

<p>An <code>optgroup</code> element is <span>expected</span> to be rendered by displaying the
element's <code data-x="attr-optgroup-label">label</code> attribute.</p>
<p>An <code>optgroup</code> element is <dfn data-x="optgroup-base-appearance">rendered with base
appearance</dfn> if it has an <span>ancestor</span> <code>select</code> element, and the nearest
<span>ancestor</span> <span><code>select</code>'s <code>option</code>s are being rendered with
base appearance</span>.</p>

<p>If an <code>optgroup</code> element is not being <span
data-x="optgroup-base-appearance">rendered with base appearance</span>, then it is
<span>expected</span> to be rendered by displaying the element's <span
data-x="concept-optgroup-label">label</span>.</p>

<p>If an <code>optgroup</code> element is being <span data-x="optgroup-base-appearance">rendered
with base appearance</span>, then it is <span>expected</span> to render with a <span>shadow
tree</span> that contains the following elements:</p>

<ol>
<li><p>An <dfn>optgroup label element</dfn>, which is a <code>div</code> element. It is appended
to the <code>optgroup</code>'s <span>shadow root</span> as the first child. It is
<span>expected</span> to contain a copy of the text in the <code>optgroup</code>'s <code
data-x="attr-optgroup-label">label</code> attribute. If the <code>optgroup</code> has a child
<code>legend</code> element, then the <span>optgroup label element</span> is not
rendered.</p></li>
Copy link
Member

@annevk annevk Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not use a slot with fallback for this? Does the legend element intentionally have different requirements than the button element. It can appear anywhere?

Copy link
Member

@annevk annevk Feb 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also found out today that this optgroup label element is expected to have padding?

Copy link
Member

@annevk annevk Feb 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And in Chrome min-height is set to 0 but that should probably be auto? cc @nt1m

Copy link
Contributor Author

@josepharhar josepharhar Mar 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not use a slot with fallback for this? Does the legend element intentionally have different requirements than the button element. It can appear anywhere?

It is supposed to be first, so yeah we could do slotting instead: https://html.spec.whatwg.org/multipage/form-elements.html#the-optgroup-element

I'll go ahead and make that change here, in chromium, and WPT.

I also found out today that this optgroup label element is expected to have padding?

Yes, I made it have the same style as the legend element when rendered with base appearance. If we made it a web exposed part-like pseudo-element, which would be awesome, then we could define that in the same style rule as the legend element. Since it isn't, at least not yet, I'll add a paragraph there which says what the expected styles are.

And in Chrome min-height is set to 0 but that should probably be auto? cc @nt1m

Ah, my bad I thought that 0 was the default value. I'll change it to something better like unset.

Copy link
Member

@annevk annevk Mar 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can first agree on the details? Since we’d have to change styles as well presumably. I’m not a 100% sold on either approach yet.

Copy link
Contributor Author

@josepharhar josepharhar Mar 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, how would you like to go about agreeing on the details?

Copy link
Member

@annevk annevk Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've made an attempt here: #12199 (comment)


<li><p>An <dfn>optgroup slot</dfn>, which is a <code>slot</code> element. It is appended to the
<code>optgroup</code>'s <span>shadow root</span> after the <span>optgroup label element</span>.
It is <span>expected</span> to take all child nodes of the <code>optgroup</code>
element.</p></li>
</ol>

<div algorithm>
<p>To determine if a <dfn><code>select</code>'s <code>option</code>s are being rendered with base
Expand All @@ -148294,12 +148319,11 @@ progress { appearance: auto; }</code></pre>
being rendered with base appearance</span>.</p>

<p>An <code>option</code> element is <span>expected</span> to be rendered by displaying the result
of <span>collect option text</span> given the <code>option</code> and true, indented under its
<code>optgroup</code> element if it has one. If the <code>option</code> <span
data-x="option-base-appearance">is being rendered with base appearance</span> and the
<code>option</code>'s <code data-x="attr-option-label">label</code> attribute is not set, then the
<code>option</code> is <span>expected</span> to render all of its children rather than by
displaying its <span data-x="concept-option-label">label</span>.</p>
of <span>collect option text</span> given the <code>option</code> and true. If the
<code>option</code> <span data-x="option-base-appearance">is being rendered with base
appearance</span> and the <code>option</code>'s <code data-x="attr-option-label">label</code>
attribute is not set, then the <code>option</code> is <span>expected</span> to render all of its
children rather than by displaying its <span data-x="concept-option-label">label</span>.</p>
Copy link
Member

@annevk annevk Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need to describe this in terms of an internal shadow tree as well. At least without that it's not clear to me how "expected to be rendered" would impact the availability of pseudo-elements.

cc @dbaron @emilio

Copy link
Contributor Author

@josepharhar josepharhar Mar 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I replaced this with an internal shadow tree definition


<p>Each sequence of one or more child <code>hr</code> element siblings may be rendered as a single
separator.</p>
Expand Down