Define base appearance for <select>

source

@@ -3230,6 +3230,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-child" data-x="concept-tree-child">child</dfn> concept</li>
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-root">root</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-root">shadow-including root</dfn> concepts</li>
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor">inclusive ancestor</dfn>,
+             <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-ancestor">ancestor</dfn>,
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-descendant">descendant</dfn>,
              <dfn data-x="concept-shadow-including-ancestor" data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-ancestor">shadow-including ancestor</dfn>,
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant">shadow-including descendant</dfn>,
@@ -3985,6 +3986,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#widget">widget</dfn></li>
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#native-appearance">native appearance</dfn></li>
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#primitive-appearance">primitive appearance</dfn></li>
+      <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#base-appearance">base appearance</dfn></li>
       <li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#element-with-default-preferred-size">element with default preferred size</dfn></li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-ui/#non-devolvable">non-devolvable widget</dfn> and
               <dfn data-x-href="https://drafts.csswg.org/css-ui/#devolvable">devolvable widget</dfn> classification, and the related
@@ -4185,6 +4187,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-contain/#content-visibility">'content-visibility'</dfn> property</li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-contain/#propdef-content-visibility" data-x="content-visibility-auto">'auto'</dfn> value for <span>'content-visibility'</span></li>
     </ul>
+
+    <p>The following terms are defined in <cite>CSS Anchor Positioning</cite>: <ref>CSSANCHOR</ref></p>
+
+    <ul class="brief">
+     <li><dfn data-x-href="https://drafts.csswg.org/css-anchor-position-1/#implicit-anchor-element">implicit anchor element</dfn></li>
+    </ul>
    </dd>
 
 
@@ -53662,6 +53670,9 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   <ol>
    <li>Set the <code>select</code> element's <span>user validity</span> to true.</li>
 
+   <li><p>Run <span>clone selected option into select button</span> given the <code>select</code>
+   element.</p></li>
+
    <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
    data-x="event-input">input</code> at the <code>select</code> element, with the <code
    data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
@@ -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>
+  <var>option</var>:</p>
+
+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>option</var>'s <span
+    data-x="ancestor">ancestors</span>:</p>
+
+    <ol>
+     <li><p>If <var>ancestor</var> is a <code>select</code>, then return
+     <var>ancestor</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Return null.</p></li>
+  </ol>
+
+  <p>To <dfn>clone selected option into select button</dfn>, given a <code>select</code> element
+  <var>select</var>:</p>
+
+  <ol>
+   <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>
+
+   <li><p>Let <var>text</var> be an empty string.</p></li>
+
+   <li><p>If <var>option</var> is not null, then set <var>text</var> to <var>option</var>'s <span
+   data-x="dom-option-label">label</span>.</p></li>
+
+   <li><p>Set <var>select</var>'s <span>select fallback button text</span> to
+   <var>text</var>.</p></li>
+  </ol>
+
+  <p>The <span>activation behavior</span> of an <code>option</code> <var>option</var> is to run the
+  following steps:</p>
+
+  <ol>
+   <li><p>Let <var>select</var> be the <span>option element ancestor select</span> given
+   <var>option</var>.</p></li>
+
+   <li><p>If <var>select</var> is null, then return.</p></li>
+
+   <li><p>Set <var>option</var>'s <span data-x="concept-option-selectedness">selectedness</span> to
+   true.</p></li>
+
+   <li><p>Set <var>option</var>'s <span data-x="concept-option-dirtiness">dirtiness</span> to
+   true.</p></li>
+
+   <li><p><span>Send <code>select</code> update notifications</span> given
+   <var>select</var>.</p></li>
+
+   <li><p>If <var>select</var> is being rendered as a <span>drop-down box</span> with <span>base
+   appearance</span>, then run the <span>hide popover algorithm</span> given <var>select</var>'s
+   <span>select popover</span>.</p></li>
+  </ol>
+
   <dl class="domintro">
    <dt><code data-x=""><var>option</var>.<span subdfn data-x="dom-option-selected">selected</span></code></dt>
 
@@ -136468,12 +136537,52 @@ progress { appearance: auto; }</code></pre>
   with the element's <code>optgroup</code> element <span data-x="concept-tree-child">children</span>
   providing headers for groups of options where applicable.</p>
 
+  <p><code>select</code> elements which render as a <span>drop-down box</span> support a <span>base
+  appearance</span> in addition to <span>native appearance</span> and <span>primitive
+  appearance</span>.</p>
+
+  <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 a <span>shadow tree</span> with the
+  following elements:</p>
+
+  <ol>
+   <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>
+
+   <li><p>A <dfn>select fallback button text</dfn>, which is a <code>div</code> element. It is
+   appended to the <span>select button slot</span>.</p></li>
+
+   <li><p>A <dfn>select popover</dfn>, which is a <code>div</code> element. It is appended to the
+   <code>select</code>'s <span>shadow root</span> as the second child, after the <span>select button
+   slot</span>.</p></li>
+
+   <li><p>A <dfn>select popover slot</dfn>, which is a <code>slot</code> element. It is appended to
+   the <span>select popover</span>. It is expected to take all child nodes of the
+   <code>select</code> except for the first child <code>button</code>, which is taken by the
+   <code>select button slot</code>.</p></li>
+  </ol>
+
+  <p class="note">Since <span>base appearance</span> is determined by computing style, it isn't
+  possible to swap this DOM structure when switching appearance. Implementations can always include
+  the DOM structure for <span>base appearance</span> when the <code>select</code> is rendered as a
+  <span>drop-down box</span> and then choose to include or exclude it from the layout tree in order
+  to control whether it gets rendered or not.</p>
+
+  <p>The <span>select popover</span>'s <span>implicit anchor element</span> is its associated
+  <code>select</code> element.</p>
+
   <p>An <code>optgroup</code> element is expected to be rendered by displaying the element's <code
   data-x="attr-optgroup-label">label</code> attribute.</p>
 
   <p>An <code>option</code> element is expected to be rendered by displaying the element's <span
   data-x="concept-option-label">label</span>, indented under its <code>optgroup</code> element if it
-  has one.</p>
+  has one. If the <code>option</code> is in a <code>select</code> which is being rendered as a
+  <span>drop-down box</span> with <span>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
+  expected to render all of its children rather than by displaying its <span
+  data-x="concept-option-label">label</span>.</p>
 
   <p>Each sequence of one or more child <code>hr</code> element siblings may be rendered as a single
   separator.</p>
@@ -143926,6 +144035,9 @@ INSERT INTERFACES HERE
    <dt id="refsCSSALIGN">[CSSALIGN]</dt>
    <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-align/">CSS Box Alignment</a></cite>, E. Etemad, T. Atkins. W3C.</dd>
 
+   <dt id="refsCSSANCHOR">[CSSANCHOR]</dt>
+   <dd><cite><a href="https://drafts.csswg.org/css-anchor-position-1/">CSS Anchor Positioning</a></cite>, T. Atkins, E. Etemad, I. Kilpatrick. W3C.</dd>
+
    <dt id="refsCSSANIMATIONS">[CSSANIMATIONS]</dt>
    <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-animations/">CSS Animations</a></cite>, D. Jackson, D. Hyatt, C. Marrin, S. Galineau, L. Baron. W3C.</dd>