Define base appearance for <select>

Author: josepharhar

source

@@ -3335,7 +3335,15 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
                       <dfn data-x="concept-element-custom-element-definition" data-x-href="https://dom.spec.whatwg.org/#concept-element-custom-element-definition">custom element definition</dfn>, and
                       <dfn data-x="concept-element-is-value" data-x-href="https://dom.spec.whatwg.org/#concept-element-is-value"><code data-x="">is</code> value</dfn></li>
 
-     <li><dfn data-x-href="https://dom.spec.whatwg.org/#mutationobserver"><code>MutationObserver</code></dfn> interface and <dfn data-x-href="https://dom.spec.whatwg.org/#mutation-observers">mutation observers</dfn> in general</li>
+     <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#mutationobserver"><code>MutationObserver</code></dfn> interface</li>
+     <li><dfn data-x-href="https://dom.spec.whatwg.org/#mutation-observers">Mutation observers</dfn> in general</li>
+     <li><dfn data-x-href="https://dom.spec.whatwg.org/#concept-mo-callback">Mutation observer callback</dfn></li>
+     <li><dfn data-x-href="https://dom.spec.whatwg.org/#dom-mutationobserver-observe">Mutation observer observe algorithm</dfn></li>
+     <li><dfn data-x-href="https://dom.spec.whatwg.org/#dom-mutationobserver-disconnect">Mutation observer disconnect algorithm</dfn></li>
+     <li><dfn data-x-href="https://dom.spec.whatwg.org/#dom-mutationobserver-disconnect"><code>MutationObserverInit</code></dfn></li>
+     <li><dfn data-x="mo childList" href="https://dom.spec.whatwg.org/#dom-mutationobserverinit-childlist"><code>childList</code></dfn></li>
+     <li><dfn data-x="mo characterData" href="https://dom.spec.whatwg.org/#dom-mutationobserverinit-characterdata"><code>characterData</code></dfn></li>
+     <li><dfn data-x="mo subtree" href="https://dom.spec.whatwg.org/#dom-mutationobserverinit-subtree"><code>subtree</code></dfn></li>
      <li><dfn data-x-href="https://dom.spec.whatwg.org/#abortcontroller"><code>AbortController</code></dfn> and its
          <dfn data-x="concept-AbortController-signal" data-x-href="https://dom.spec.whatwg.org/#abortcontroller-signal">signal</dfn></li>
      <li><dfn data-x-href="https://dom.spec.whatwg.org/#abortsignal"><code>AbortSignal</code></dfn></li>
@@ -3976,6 +3984,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
@@ -53970,7 +53979,7 @@ interface <dfn interface>HTMLDataListElement</dfn> : <span>HTMLElement</span> {
   element <span>represents</span> nothing<span w-nodev> and it, along with its children, should
   be hidden</span>.</p>
 
-  <p>The <code>datalist</code> element can be used in two ways. In the simplest case, the
+  <p>The <code>datalist</code> element can be used in three ways. In the simplest case, the
   <code>datalist</code> element has just <code>option</code> element children.</p>
 
   <div class="example">
@@ -54010,6 +54019,22 @@ interface <dfn interface>HTMLDataListElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <p>In the third case, the <code>datalist</code> element can be used as a <code
+  data-x="attr-popover">popover</code> for <code>select</code> elements which are being rendered as
+  a <span>drop-down box</span> with <span>base appearance</span> when inserted as a child of the
+  <code>select</code>.</p>
+
+  <div class="example">
+
+  <pre><code class="html">&lt;select>
+  &lt;datalist>
+    &lt;option>Cat&lt;/option>
+    &lt;option>Dog&lt;/option>
+  &lt;/datalist>
+&lt;/select></code></pre>
+
+  </div>
+
   <p>The <code>datalist</code> element is hooked up to an <code>input</code> element using the <code
   data-x="attr-input-list">list</code> attribute on the <code>input</code> element.</p>
 
@@ -54267,6 +54292,60 @@ 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><code>option</code> elements each have an <dfn>option element mutation observer</dfn>, which is
+  a <code>MutationObserver</code>, initially set to a new <code>MutationObserver</code> with its
+  <span>mutation observer callback</span> set to the <span>option element mutation callback</span>
+  with the <code>option</code> element provided as an argument.</p>
+
+  <p>To perform the <dfn>option element mutation callback</dfn>, given an <code>option</code> element
+  <var>option</var> and a list <var>recordQueue</var>:</p>
+
+  <ol>
+   <li><p>Let <var>select</var> be the result of running <span>option element ancestor select</span>
+   given <var>option</var>.</p></li>
+
+   <li><p>If <var>select</var> is not null and <var>select</var> is being rendered as a
+   <span>drop-down box</span>, then set <var>select</var>'s <span>select fallback
+   button text</span> to the value of <var>option</var>'s <span
+   data-x="dom-option-label">label</span>.</p></li>
+  </ol>
+
+  <p>The <code>option</code> <span>HTML element insertion steps</span>, given
+  <var>insertedOption</var>, are:</p>
+
+  <ol>
+   <li><p>Run the <span>mutation observer observe algorithm</span> given <var>insertedOption</var>'s
+   <span>option element mutation observer</span>, <var>insertedOption</var>, and a
+   <code>MutationObserverInit</code> with <code data-x="mo characterData">characterData</code> set
+   to true, <code data-x="mo childList">childList</code> set to true, and <code data-x="mo
+   subtree">subtree</code> set to true.</p></li>
+  </ol>
+
+  <p>The <code>option</code> <span>HTML element removing steps</span>, given
+  <var>removedOption</var>, are:</p>
+
+  <ol>
+   <li><p>Run the <span>mutation observer disconnect algorithm</span> given
+   <var>removedOption</var>'s <span>option element mutation observer</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>
 
@@ -135534,12 +135613,122 @@ 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>
 
+  <!-- TODO should parts of this be in form-elements instead of rendering? -->
+
+  <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 the following <span>shadow
+  root</span>:</p>
+
+  <pre><code class="html" data-x=""><slot id="select-button-slot">
+  <button id="select-fallback-button">
+    <span id="select-fallback-button-text"></span>
+  </button>
+</slot>
+<slot id="select-datalist-slot">
+  <datalist id="select-fallback-datalist">
+    <slot id="select-datalist-options-slot"></slot>
+  </datalist>
+</slot></code></pre>
+
+  <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><code>select</code> elements rendered as a <span>drop-down box</span> with <span>base
+  appearance</span> each contain the following elements as shown with ID attributes in the above
+  HTML:</p>
+
+  <!-- TODO is it OK for me to use <ul>, <li>, and <p> like this even though it isn't an
+  algorithm? -->
+  <ul>
+   <li><p>A <dfn>select button slot</dfn>, which is a <code>slot</code>.</p></li>
+
+   <li><p>A <dfn>select fallback button</dfn>, which is a <code>button</code>.</p></li>
+
+   <li><p><dfn>Select fallback button text</dfn>, which is a <code>span</code>.</p></li>
+
+   <li><p>A <dfn>select datalist slot</dfn>, which is a <code>slot</code>.</p></li>
+
+   <!-- TODO update <datalist> spec for content model and rendering? also popover behavior -->
+   <li><p>A <dfn>select fallback datalist</dfn>, which is a <code>datalist</code>.</p></li>
+
+   <li><p>A <dfn>select datalist options slot</dfn>, which is a <code>slot</code>.</p></li>
+  </ul>
+
+  <p>The <span>shadow root</span> used for <code>select</code>'s <span>drop-down box</span>
+  <span>base appearance</span> must have its <span>slot assignment</span> set to "<code
+  data-x="">manual</code>" and its <span>delegates focus</span> set to true.</p>
+
+  <p class="note">Without <span>delegates focus</span> set to true, the <code>select</code> itself
+  would receive focus instead of the <code>button</code> which is slotted into the <span>select
+  button slot</span>.</p>
+
+  <p><code>select</code> elements rendered as a <span>drop-down box</span> with <span>base
+  appearance</span> must render as if they are using <span>manual slot assignment</span> with the
+  following <dfn>base select slotting algorithm</dfn> to <span data-x="assign a slot">assign</span>
+  their child nodes to slots. To perform the <span>base select slotting algorithm</span>, given a
+  <code>select</code> element <var>select</var>:</p>
+
+  <ol>
+   <li><p>Let <var>firstButton</var> be null.</p></li>
+
+   <li><p>Let <var>firstDatalist</var> be null.</p></li>
+
+   <li><p>Let <var>otherChildren</var> be « ».</p></li>
+
+   <li>
+    <p><span data-x="list iterate">For each</span> <code>Node</code> <var>child</var> in
+    <var>select</var>'s <span data-x="concept-tree-child">children</span>:</p>
+
+    <ol>
+     <li>
+      <p>If <var>child</var> is a <code>button</code>:</p>
+
+      <ol>
+       <li><p>If <var>firstButton</var> is null, then set <var>firstButton</var> to
+       <var>child</var>.</p></li>
+      </ol>
+     </li>
+
+     <li>
+      <p>If <var>child</var> is a <code>datalist</code>:</p>
+
+      <ol>
+       <li><p>If <var>firstDatalist</var> is null, then set <var>firstDatalist</var> to
+       <var>child</var>.</p></li>
+      </ol>
+     </li>
+
+     <li><p><span data-x="list append">Append</span> <var>child</var> to
+     <var>otherChildren</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Set <var>select</var>'s <span>select button slot</span>'s <span>manually assigned
+   nodes</span> to <var>firstButton</var>.</p></li>
+
+   <li><p>Set <var>select</var>'s <span>select datalist slot</span>'s <span>manually assigned
+   nodes</span> to <var>firstDatalist</var>.</p></li>
+
+   <li><p>Set <var>select</var>'s <span>select datalist options slot</span>'s <span>manually
+   assigned nodes</span> to <var>otherChildren</var>.</p></li>
+  </ol>
+
   <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 being rendered in a <code>select</code> which is being
+  rendered as a <span>drop-down box</span> with <span>base appearance</span>, 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>