Define optgroup base appearance rendering

source

@@ -57526,15 +57526,15 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
   </div>
 
   <div algorithm>
-  <p>To get the <dfn><code>option</code> element nearest ancestor <code>select</code></dfn> given an
-  <code>option</code> <var>option</var>, run these steps. They return a <code>select</code> or
-  null.</p>
+  <p>To get the <dfn data-x="option element nearest ancestor select">nearest ancestor
+  <code>select</code></dfn> given an <code>Element</code> <var>element</var>, run these steps. They
+  return a <code>select</code> or null.</p>
 
   <ol>
    <li><p>Let <var>ancestorOptgroup</var> be null.</p></li>
 
    <li>
-    <p>For each <var>ancestor</var> of <var>option</var>'s <span data-x="ancestor">ancestors</span>,
+    <p>For each <var>ancestor</var> of <var>element</var>'s <span data-x="ancestor">ancestors</span>,
     in reverse <span>tree order</span>:</p>
 
     <ol>
@@ -148753,12 +148753,45 @@ 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 data-x="option element nearest ancestor select">ancestor
+  <code>select</code></span> whose <span data-x="select's options are being rendered with base
+  appearance">contents 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 class="XXX">The <code>optgroup</code> element's <span>native appearance</span> and
+  <span>primitive appearance</span> needs to be better defined. See <a
+  href="https://github.com/whatwg/html/issues/12199">issue #12199</a>.</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 legend slot</dfn>, which is a <code>slot</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 take the first child element of the <code>optgroup</code> if the first
+   child element is a <code>legend</code> element.</p></li>
+
+   <li><p>An <dfn>optgroup label element</dfn>, which is a <code>div</code> element. It is appended
+   to the <span>optgroup legend slot</span>. 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.</p></li>
+
+   <li><p>An <dfn>optgroup contents 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 remaining 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
-  appearance</dfn>, given a <code>select</code> element <var>select</var>:</p>
+  <p>To determine if a <dfn data-x="select's options are being rendered with base
+  appearance"><code>select</code>'s contents are being rendered with base appearance</dfn>, given a
+  <code>select</code> element <var>select</var>:</p>
 
   <ol>
    <li><p>If <var>select</var> is being rendered as a <span>list box</span> with <span>base
@@ -148778,13 +148811,33 @@ progress { appearance: auto; }</code></pre>
   ancestor <code>select</code></span> and the <span><code>select</code>'s <code>option</code>s are
   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>
+  <p>If an <code>option</code> element is not being <span data-x="option-base-appearance">rendered
+  with base appearance</span>, then it is <span>expected</span> to be rendered by displaying the
+  result of <span>collect option text</span> given the <code>option</code> and true.</p>
+
+  <p>If an <code>option</code> element is being <span data-x="option-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>option contents slot</dfn>, which is a <code>slot</code> element. It is appended to
+    the <code>option</code>'s <span>shadow root</span> as the second child. If the
+    <code>option</code> has the <code data-x="attr-option-label">label</code> attribute set to any
+    value besides the empty string, then the <span>option contents slot</span> is
+    <span>expected</span> to not take any nodes. Otherwise, it is <span>expected</span> to to take
+    all child nodes of the <code>option</code> element.</p>
+
+    <p class="note">When the <span>option contents slot</span> does not take any elements, the
+    <span>option label element</span> is rendered as fallback content, which happens when the author
+    sets the <code data-x="attr-option-label">label</code> attribute.</p>
+   </li>
+
+   <li><p>An <dfn>option label element</dfn>, which is a <code>span</code> element. It is appended
+   to the <span>option contents slot</span>. It is <span>expected</span> to have a text node child
+   containing the value of the <code>option</code>'s <code data-x="attr-option-label">label</code>
+   attribute.</p></li>
+  </ol>
 
   <p>Each sequence of one or more child <code>hr</code> element siblings may be rendered as a single
   separator.</p>
@@ -148966,6 +149019,16 @@ select {
   block-size: calc(max(24px, 1lh) * attr(size type(&lt;integer>), 4));
 }</code></pre>
 
+  <p>The following styles are <span>expected</span> to apply to the <span>optgroup label
+  element</span> when its parent <code>optgroup</code> element is being <span
+  data-x="optgroup-base-appearance">rendered with base appearance</span>:</p>
+
+  <ul>
+   <li><p><code data-x="" class="css">padding-inline: 0.5em</code></p></li>
+
+   <li><p><code data-x="" class="css">min-block-size: 1lh</code></p></li>
+  </ul>
+
   <div w-nodev>
 
   <h4>The <code>textarea</code> element</h4>