From c34b79c71e2c437922b77e9554a9eaae1f8d808c Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Wed, 25 Feb 2026 11:50:07 -0800 Subject: [PATCH 01/11] Define optgroup base appearance rendering The old text didn't explain that there is a shadow tree with an element which renders the label attribute, and that it goes away when the author provides a legend element. The UA styles for rendering the optgroup element with base appearance are still valid. Fixes https://github.com/whatwg/html/issues/12199 --- source | 40 ++++++++++++++++++++++++++++++++-------- 1 file changed, 32 insertions(+), 8 deletions(-) diff --git a/source b/source index afb055f3c00..2a5bbc5e215 100644 --- a/source +++ b/source @@ -148268,8 +148268,33 @@ progress { appearance: auto; }

The '::checkmark' pseudo-element only applies to option elements which are being rendered with base appearance.

-

An optgroup element is expected to be rendered by displaying the - element's label attribute.

+

An optgroup element is rendered with base + appearance if it has an ancestor select element, and the nearest + ancestor select's options are being rendered with + base appearance.

+ +

If an optgroup element is not being rendered with base appearance, then it is + expected to be rendered by displaying the element's label.

+ +

If an optgroup element is being rendered + with base appearance, then it is expected to render with a shadow + tree that contains the following elements:

+ +
    +

  1. An optgroup label element, which is a div element. It is appended + to the optgroup's shadow root as the first child. It is + expected to contain a copy of the text in the optgroup's label attribute. If the optgroup has a child + legend element, then the optgroup label element is not + rendered.

    2. + +

  2. An optgroup slot, which is a slot element. It is appended to the + optgroup's shadow root after the optgroup label element. + It is expected to take all child nodes of the optgroup + element.

    3. +

To determine if a select's options are being rendered with base @@ -148294,12 +148319,11 @@ progress { appearance: auto; } being rendered with base appearance.

An option element is expected to be rendered by displaying the result - of collect option text given the option and true, indented under its - optgroup element if it has one. If the option is being rendered with base appearance and the - option's label attribute is not set, then the - option is expected to render all of its children rather than by - displaying its label.

+ of collect option text given the option and true. If the + option is being rendered with base + appearance and the option's label + attribute is not set, then the option is expected to render all of its + children rather than by displaying its label.

Each sequence of one or more child hr element siblings may be rendered as a single separator.

From 5fd0dc6ebcd241e92b05333c54bf3c668a07a6d5 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 3 Mar 2026 11:00:49 -0800 Subject: [PATCH 02/11] optgroup legend slot --- source | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/source b/source index ee69d4175f4..8bf1228036b 100644 --- a/source +++ b/source @@ -148365,17 +148365,21 @@ progress { appearance: auto; } tree that contains the following elements:

    +

  1. A optgroup legend slot, which is a slot element. It is appended to + the optgroup's shadow root as the first child. It is + expected to take the first child element of the optgroup if the first + child element is a legend element.

    2. +

  2. An optgroup label element, which is a div element. It is appended - to the optgroup's shadow root as the first child. It is - expected to contain a copy of the text in the optgroup's label attribute. If the optgroup has a child - legend element, then the optgroup label element is not - rendered.

    3. + to the optgroup legend slot as the first child. It is expected to + contain a copy of the text in the optgroup's label attribute.

  3. An optgroup slot, which is a slot element. It is appended to the optgroup's shadow root after the optgroup label element. It is expected to take all child nodes of the optgroup - element.

    4. + element except for the first child legend element, if present, which is taken by the + optgroup legend slot.

From dacd3384197630cb1365cccf5d5e500f603bc27d Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 3 Mar 2026 12:56:17 -0800 Subject: [PATCH 03/11] ua styles for label holder --- source | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/source b/source index 8bf1228036b..977368645fe 100644 --- a/source +++ b/source @@ -148365,8 +148365,8 @@ progress { appearance: auto; } tree that contains the following elements:

    -

  1. A optgroup legend slot, which is a slot element. It is appended to - the optgroup's shadow root as the first child. It is +

  2. An optgroup legend slot, which is a slot element. It is appended + to the optgroup's shadow root as the first child. It is expected to take the first child element of the optgroup if the first child element is a legend element.

    3. @@ -148583,6 +148583,16 @@ select { block-size: calc(max(24px, 1lh) * attr(size type(<integer>), 4)); } +

    The following styles are expected to apply to the optgroup label + element when its parent optgroup element is being rendered with base appearance:

    + +
      +

    • padding-inline: 0.5em

      • + +

    • min-block-size: 1lh

      • +
    +

    The textarea element

    From 919c0abc70433711b66dd7c25716c24011c9d6c1 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 3 Mar 2026 13:25:27 -0800 Subject: [PATCH 04/11] option shadow tree and label attribute --- source | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/source b/source index 977368645fe..0ff76708398 100644 --- a/source +++ b/source @@ -148404,12 +148404,31 @@ progress { appearance: auto; } ancestor select and the select's options are being rendered with base appearance.

    -

    An option element is expected to be rendered by displaying the result - of collect option text given the option and true. If the - option is being rendered with base - appearance and the option's label - attribute is not set, then the option is expected to render all of its - children rather than by displaying its label.

    +

    If an option element is not being rendered + with base appearance, then it is expected to be rendered by displaying the + result of collect option text given the option and true.

    + +

    If an option element is being rendered + with base appearance, then it is expected to render with a shadow + tree that contains the following elements:

    + +
      +

    1. An option label element, which is a div element. It is appended to + the option's shadow root as the first child. It is + expected to have a text node child containing the value of the option's + label attribute. If the option element does + not have the label attribute, or the label is set to an empty string, then the option label + element is expected to have its 'display' property set to + 'none'.

      2. + +

    2. An option content slot, which is a slot element. It is appended to + the option's shadow root as the second child. It is + expected to take all child nodes of the option element. If the + option has the label attribute set to any + value besides the empty string, then the option content slot is + expected to have its 'display' property set to 'none'.

      3. +

    Each sequence of one or more child hr element siblings may be rendered as a single separator.

    @@ -148588,9 +148607,9 @@ select { data-x="optgroup-base-appearance">rendered with base appearance:

      -

    • padding-inline: 0.5em

      • +

    • padding-inline: 0.5em

      • -

    • min-block-size: 1lh

      • +

    • min-block-size: 1lh

    From f5571b41514c9381954c0374305e002600595cfb Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Wed, 15 Apr 2026 18:06:56 -0700 Subject: [PATCH 05/11] rename options are being rendered with base appearance --- source | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/source b/source index 24eab159fb7..05cce4fce38 100644 --- a/source +++ b/source @@ -148755,14 +148755,18 @@ progress { appearance: auto; }

    An optgroup element is rendered with base appearance if it has an ancestor select element, and the nearest - ancestor select's options are being rendered with - base appearance.

    + ancestor select's contents are being rendered with base appearance.

    If an optgroup element is not being rendered with base appearance, then it is expected to be rendered by displaying the element's label.

    +

    The optgroup element's native appearance and + primitive appearance needs to be better defined. See issue #12199.

    +

    If an optgroup element is being rendered with base appearance, then it is expected to render with a shadow tree that contains the following elements:

    @@ -148786,8 +148790,9 @@ progress { appearance: auto; }
-

To determine if a select's options are being rendered with base - appearance, given a select element select:

+

To determine if a select's contents are being rendered with base appearance, given a + select element select:

  1. If select is being rendered as a list box with base From 55e38c78191d77ee8b17152668b707a52e3fd3b4 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Thu, 16 Apr 2026 11:37:54 -0700 Subject: [PATCH 06/11] improvements --- source | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/source b/source index 05cce4fce38..994f03c8d8c 100644 --- a/source +++ b/source @@ -148778,15 +148778,14 @@ progress { appearance: auto; } child element is a legend element.

  2. An optgroup label element, which is a div element. It is appended - to the optgroup legend slot as the first child. It is expected to - contain a copy of the text in the optgroup's label attribute.

    3. + to the optgroup legend slot. It is expected to contain a copy of the + text in the optgroup's label + attribute.

    -

  3. An optgroup slot, which is a slot element. It is appended to the - optgroup's shadow root after the optgroup label element. - It is expected to take all child nodes of the optgroup - element except for the first child legend element, if present, which is taken by the - optgroup legend slot.

    4. +

  4. An optgroup contents slot, which is a slot element. It is appended + to the optgroup's shadow root after the optgroup label + element. It is expected to take all remaining child nodes of the + optgroup element.

From 23f2425c44a8170168bdbabf44bed12e3781f716 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Thu, 16 Apr 2026 12:09:03 -0700 Subject: [PATCH 07/11] use slot assignment and fallbacks instead of styles --- source | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/source b/source index 994f03c8d8c..c76c98c734c 100644 --- a/source +++ b/source @@ -148820,21 +148820,23 @@ progress { appearance: auto; } tree that contains the following elements:

    -

  1. An option label element, which is a div element. It is appended to - the option's shadow root as the first child. It is - expected to have a text node child containing the value of the option's - label attribute. If the option element does - not have the label attribute, or the label is set to an empty string, then the option label - element is expected to have its 'display' property set to - 'none'.

    2. +
  2. +

    An option contents slot, which is a slot element. It is appended to + the option's shadow root as the second child. If the + option has the label attribute set to any + value besides the empty string, then the option contents slot is + expected to not take any nodes. Otherwise, it is expected to to take + all child nodes of the option element.

    -

  3. An option content slot, which is a slot element. It is appended to - the option's shadow root as the second child. It is - expected to take all child nodes of the option element. If the - option has the label attribute set to any - value besides the empty string, then the option content slot is - expected to have its 'display' property set to 'none'.

    4. +

    When the option contents slot does not take any elements, the + option label element is rendered as fallback content, which happens when the author + sets the label attribute.

    + + +

  4. An option label element, which is a span element. It is appended + to the option contents slot. It is expected to have a text node child + containing the value of the option's label + attribute.

Each sequence of one or more child hr element siblings may be rendered as a single From 7c84a75658c186ae33c5f970cca6870e6b86064b Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Mon, 27 Apr 2026 13:22:25 -0700 Subject: [PATCH 08/11] use shared ancestor select algorithm --- source | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/source b/source index c76c98c734c..70f7e1d9529 100644 --- a/source +++ b/source @@ -57526,15 +57526,15 @@ interface HTMLOptionElement : HTMLElement {

-

To get the option element nearest ancestor select given an - option option, run these steps. They return a select or - null.

+

To get the nearest ancestor + select given an Element element, run these steps. They + return a select or null.

  1. Let ancestorOptgroup be null.

  2. -

    For each ancestor of option's ancestors, +

    For each ancestor of element's ancestors, in reverse tree order:

      @@ -148754,9 +148754,9 @@ progress { appearance: auto; } which are being rendered with base appearance.

      An optgroup element is rendered with base - appearance if it has an ancestor select element, and the nearest - ancestor select's contents are being rendered with base appearance.

      + appearance if it has an ancestor + select whose contents are being rendered with base appearance.

      If an optgroup element is not being rendered with base appearance, then it is From c1af152e673c09ee7964af9492ed7fb867ae92fd Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Sun, 3 May 2026 11:38:28 -0700 Subject: [PATCH 09/11] always apply optgroup label element styles --- source | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/source b/source index 70f7e1d9529..99baa8c291e 100644 --- a/source +++ b/source @@ -148784,7 +148784,7 @@ progress { appearance: auto; }

    1. An optgroup contents slot, which is a slot element. It is appended to the optgroup's shadow root after the optgroup label - element. It is expected to take all remaining child nodes of the + element. It is expected to take all remaining child nodes of the optgroup element.

    @@ -149020,8 +149020,7 @@ select { }

    The following styles are expected to apply to the optgroup label - element when its parent optgroup element is being rendered with base appearance:

    + element:

    • padding-inline: 0.5em

      • From 0fad748489e2f5237234b8a4b4f6cc48a48e2b2a Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Sun, 3 May 2026 11:42:28 -0700 Subject: [PATCH 10/11] add option/optgroup global styles --- source | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/source b/source index 99baa8c291e..c2254a21adf 100644 --- a/source +++ b/source @@ -148875,6 +148875,17 @@ progress { appearance: auto; }
+ 
@namespace "http://www.w3.org/1999/xhtml";
+
+option {
+  display: block;
+}
+
+optgroup {
+  display: block;
+  font-weight: bolder;
+}
+

The following styles are expected to apply to select elements when they are being rendered with native appearance or primitive appearance:

From c170d1241397408155a0005bab52e8a52e86ed68 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 19 May 2026 13:46:21 -0700 Subject: [PATCH 11/11] address feedback --- source | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/source b/source index c2254a21adf..f26e6bbc563 100644 --- a/source +++ b/source @@ -148754,9 +148754,9 @@ progress { appearance: auto; } which are being rendered with base appearance.

An optgroup element is rendered with base - appearance if it has an ancestor - select whose contents are being rendered with base appearance.

+ appearance if it has a nearest + ancestor select whose contents are being rendered with base appearance.

If an optgroup element is not being rendered with base appearance, then it is @@ -148783,8 +148783,8 @@ progress { appearance: auto; } attribute.

  • An optgroup contents slot, which is a slot element. It is appended - to the optgroup's shadow root after the optgroup label - element. It is expected to take all remaining child nodes of the + to the optgroup's shadow root after the optgroup legend + slot. It is expected to take all remaining child nodes of the optgroup element.

    • @@ -148822,11 +148822,11 @@ progress { appearance: auto; }

    1. An option contents slot, which is a slot element. It is appended to - the option's shadow root as the second child. If the - option has the label attribute set to any - value besides the empty string, then the option contents slot is - expected to not take any nodes. Otherwise, it is expected to to take - all child nodes of the option element.

      + the option's shadow root as the first child. + If the option element's label attribute + value is not the empty string, then the option contents slot is + expected to not take any nodes. Otherwise, it is expected to take all + child nodes of the option element.

      When the option contents slot does not take any elements, the option label element is rendered as fallback content, which happens when the author