Define optgroup base appearance rendering

source

@@ -148350,8 +148350,37 @@ 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 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> 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.</p></li>
+
+   <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 except for the first child <code>legend</code> element, if present, which is taken by the
+   <span>optgroup legend slot</span>.</p></li>
+  </ol>
 
   <div algorithm>
   <p>To determine if a <dfn><code>select</code>'s <code>option</code>s are being rendered with base
@@ -148375,13 +148404,31 @@ 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 label element</dfn>, which is a <code>div</code> element. It is appended to
+   the <code>option</code>'s <span>shadow root</span> as the first child. 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. If the <code>option</code> element does
+   not have the <code data-x="attr-option-label">label</code> attribute, or the <code
+   data-x="attr-option-label">label</code> is set to an empty string, then the <span>option label
+   element</span> is <span>expected</span> to have its <span>'display'</span> property set to
+   'none'.</p></li>
+
+   <li><p>An <dfn>option content 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. It is
+   <span>expected</span> to take all child nodes of the <code>option</code> element. 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 content slot</span> is
+   <span>expected</span> to have its <span>'display'</span> property set to 'none'.</p></li>
+  </ol>
 
   <p>Each sequence of one or more child <code>hr</code> element siblings may be rendered as a single
   separator.</p>
@@ -148555,6 +148602,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>