add separate opt in for picker

source

@@ -3857,6 +3857,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-fonts/#valdef-font-stretch-ultra-expanded">'ultra-expanded'</dfn> value</li>
     </ul>
 
+    <p>The following features are defined in <cite>CSS Forms</cite>:
+    <ref>CSSFORMS</ref></p>
+
+    <ul class="brief">
+     <li>The <dfn data-x-href="https://drafts.csswg.org/css-forms/#picker-pseudo-element">picker
+     pseudo-element</dfn></li>
+    </ul>
+
     <p>The following features are defined in <cite>CSS Grid Layout</cite>: <ref>CSSGRID</ref></p>
 
     <ul class="brief">
@@ -53748,9 +53756,9 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   unfocusing the element after changing its value, or through a <span data-x="option-command">menu
   command</span>, or through any other mechanism) by running the <span>pick an option</span>
   algorithm given the <code>select</code> element, the <code>option</code> element, and if
-  <code>select</code> is being rendered with <span>base appearance</span>, a corresponding <code
-  data-x="event-keydown">keydown</code> or <code data-x="event-mouseup">mouseup</code> event,
-  otherwise null.</p>
+  <code>select</code> and its <span>select popover </span> are both being rendered with <span>base
+  appearance</span>, a corresponding <code data-x="event-keydown">keydown</code> or <code
+  data-x="event-mouseup">mouseup</code> event, otherwise null.</p>
 
   <p>To <dfn>pick an option</dfn> given a <code>select</code> element <var>select</var>, an
   <code>option</code> element <var>option</var>, and an <code>Event</code> or null
@@ -137310,6 +137318,11 @@ progress { appearance: auto; }</code></pre>
   appearance</span> in addition to <span>native appearance</span> and <span>primitive
   appearance</span>.</p>
 
+  <p>The <code>select</code> element's <span>select popover</span> supports a <span>base
+  appearance</span> and a <span>native appearance</span>. The <span>select popover</span> can only
+  be rendered with <span>base appearance</span> if its associated <code>select</code> is being
+  rendered with <span>base 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>
@@ -137325,7 +137338,8 @@ progress { appearance: auto; }</code></pre>
 
    <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>
+   slot</span>. The <code>select</code> element's <span>picker pseudo-element</span> is the
+   <span>select popover</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
@@ -137339,6 +137353,10 @@ progress { appearance: auto; }</code></pre>
   <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 class="note">The <span>select popover</span> is only rendered when it is opted in to <span>base
+  appearance</span> separately from the <code>select</code> element. Otherwise, a native picker is
+  used.</p>
+
   <p>The <span>select popover</span>'s <span>implicit anchor element</span> is its associated
   <code>select</code> element.</p>
 
@@ -137348,9 +137366,10 @@ progress { appearance: auto; }</code></pre>
   <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. 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
+  <span>drop-down box</span> with <span>base appearance</span>, and the <code>select</code>'s
+  <span>select popover</span> is being rendered 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
@@ -144856,6 +144875,9 @@ INSERT INTERFACES HERE
    <dt id="refsCSSFONTS">[CSSFONTS]</dt>
    <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-fonts/">CSS Fonts</a></cite>, J. Daggett. W3C.</dd>
 
+   <dt id="refsCSSFORMS">[CSSFORMS]</dt>
+   <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-forms/">CSS Forms</a></cite>, T. Nguyen. W3C.</dd>
+
    <dt id="refsCSSFLEXBOX">[CSSFLEXBOX]</dt>
    <dd><cite><a href="https://w3c.github.io/csswg-drafts/css-flexbox/">CSS Flexible Box Layout</a></cite>, T. Atkins, E. Etemad, R. Atanassov. W3C.</dd>