Define the <selectedoption> element

Author: josepharhar

source

@@ -1807,6 +1807,22 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    </li>
   </ol>
 
+  <p>The <span data-x="concept-node-post-connection-ext">post-connection steps</span> for the HTML
+  Standard, given <var>insertedNode</var>, are defined as the following:</p>
+
+  <ol>
+   <li>
+    <p>For each <var>descendant</var> of <var>insertedNode</var>'s <span data-x="inclusive
+    descendant">inclusive descendants</span> in <span>tree order</span>:</p>
+
+    <ol>
+     <li><p>If <var>descendant</var> is a <code>selectedoption</code> element, then run the
+     <span>selectedoption insertion steps</span> given <var>descendant</var> and
+     <var>insertedNode</var>'s <span>parent</span>.</p></li>
+    </ol>
+   </li>
+  </ol>
+
   <p>The <span data-x="concept-node-remove-ext">removing steps</span> for the HTML Standard, given
   <var>removedNode</var> and <var>oldParent</var>, are defined as the following:</p>
 
@@ -1857,6 +1873,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <ol>
      <li><p>If <var>descendant</var> is an <code>option</code> element, then run the <span>option
      removal steps</span> given <var>descendant</var> and <var>oldParent</var>.</p></li>
+
+     <li><p>If <var>descendant</var> is a <code>selectedoption</code> element, then run the
+     <span>selectedoption removal steps</span> given <var>descendant</var> and
+     <var>oldParent</var>.</p></li>
     </ol>
    </li>
   </ol>
@@ -3222,6 +3242,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x="dom-Element-id" data-x-href="https://dom.spec.whatwg.org/#dom-element-id"><code>id</code></dfn> attribute</li>
      <li><dfn data-x="dom-Element-setAttribute" data-x-href="https://dom.spec.whatwg.org/#dom-element-setattribute"><code>setAttribute()</code></dfn> method</li>
      <li><dfn data-x-href="https://dom.spec.whatwg.org/#dom-node-textcontent"><code>textContent</code></dfn> attribute</li>
+     <li><dfn data-x="dom-parentnode-replacechildren" data-x-href="https://dom.spec.whatwg.org/#dom-parentnode-replacechildren"><code>replaceChildren()</code></dfn> method</li>
 
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree">tree</dfn>, <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-tree">shadow tree</dfn>, and <dfn data-x-href="https://dom.spec.whatwg.org/#concept-node-tree">node tree</dfn> concepts</li>
      <li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-order">tree order</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-tree-order">shadow-including tree order</dfn> concepts</li>
@@ -3257,6 +3278,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x="concept-tree-descendant" data-x-href="https://dom.spec.whatwg.org/#concept-tree-descendant">descendant</dfn> concept</li>
      <li>The <dfn data-x="concept-node-insert-ext" data-x-href="https://dom.spec.whatwg.org/#concept-node-insert-ext">insertion steps</dfn>,
              <dfn data-x="concept-node-remove-ext" data-x-href="https://dom.spec.whatwg.org/#concept-node-remove-ext">removing steps</dfn>,
+             <dfn data-x="concept-node-post-connection-ext" data-x-href="https://dom.spec.whatwg.org/#concept-node-post-connection-ext">post-connection steps</dfn>,
              <dfn data-x="concept-node-adopt-ext" data-x-href="https://dom.spec.whatwg.org/#concept-node-adopt-ext">adopting steps</dfn>, and
              <dfn data-x-href="https://dom.spec.whatwg.org/#concept-node-children-changed-ext">children changed steps</dfn> hooks for elements</li>
      <li>The <dfn data-x="concept-element-attributes-change" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-change">change</dfn>, <dfn data-x="concept-element-attributes-append" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-append">append</dfn>, <dfn data-x="concept-element-attributes-remove" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-remove">remove</dfn>, <dfn data-x="concept-element-attributes-replace" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-replace">replace</dfn>, <dfn data-x="concept-element-attributes-get-by-namespace" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-get-by-namespace">get an attribute by namespace and local name</dfn>, <dfn data-x="concept-element-attributes-set-value" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-set-value">set value</dfn>, and <dfn data-x="concept-element-attributes-remove-by-namespace" data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-remove-by-namespace">remove an attribute by namespace and local name</dfn> algorithms for attributes</li>
@@ -3344,6 +3366,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x="mo childList" data-x-href="https://dom.spec.whatwg.org/#dom-mutationobserverinit-childlist"><code>childList</code></dfn></li>
      <li><dfn data-x="mo characterData" data-x-href="https://dom.spec.whatwg.org/#dom-mutationobserverinit-characterdata"><code>characterData</code></dfn></li>
      <li><dfn data-x="mo subtree" data-x-href="https://dom.spec.whatwg.org/#dom-mutationobserverinit-subtree"><code>subtree</code></dfn></li>
+     <li><dfn data-x="mo attributes" data-xhref="https://dom.spec.whatwg.org/#dom-mutationobserverinit-attributes"><code>attributes</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>
@@ -53436,6 +53459,9 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
    <li><p>Return <var>options</var>.</p></li>
   </ol>
 
+  <p>Every <code>select</code> element has <dfn>select descendant selectedoption elements</dfn>,
+  which is a <span>list</span> of <code>selectedoption</code> elements, initially « ».</p>
+
   <p>The <dfn element-attr for="select"><code data-x="attr-select-required">required</code></dfn>
   attribute is a <span>boolean attribute</span>. When specified, the user will be required to select
   a value before submitting the form.</p>
@@ -53482,10 +53508,23 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   through a click, or through unfocusing the element after changing its value, or through a <span
   data-x="option-command">menu command</span>, or through any other mechanism), and before the
   relevant user interaction event <!-- interaction event spec point --> is queued (e.g. before the
-  <code data-x="event-click">click</code> event), the user agent must set the <span
-  data-x="concept-option-selectedness">selectedness</span> of the picked <code>option</code> element
-  to true, set its <span data-x="concept-option-dirtiness">dirtiness</span> to true, and then
-  <span>send <code>select</code> update notifications</span>.</p>
+  <code data-x="event-click">click</code> event), the user agent must run the following steps given
+  the <code>select</code> <var>select</var> and the picked <code>option</code>
+  <var>option</var>:</p>
+
+  <ol>
+   <li><p>Set the <span data-x="concept-option-selectedness">selectedness</span> of
+   <var>option</var> to true.</p></li>
+
+   <li><p>Set the <span data-x="concept-option-dirtiness">dirtiness</span> of <var>option</var> to
+   true.</p></li>
+
+   <li><p><span>Send <code>select</code> update notifications</span>.</p></li>
+
+   <li><p>For each <var>selectedoption</var> in <var>select</var>'s <span>select descendant
+   selectedoption elements</span>, run <span>clone an option into a selectedoption</span> given
+   <var>option</var> and <var>selectedoption</var>.</p></li>
+  </ol>
 
   <p>If the <code data-x="attr-select-multiple">multiple</code> attribute is absent, whenever an
   <code>option</code> element in the <code>select</code> element's <span
@@ -53514,23 +53553,33 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
 
   <ol>
    <li><p>If <var>element</var>'s <code data-x="attr-select-multiple">multiple</code> attribute is
-   absent, and <var>element</var>'s <span data-x="concept-select-size">display size</span> is 1,
-   and no <code>option</code> elements in the <var>element</var>'s <span
+   absent, then return.</p></li>
+
+   <li><p>If <var>element</var>'s <span data-x="concept-select-size">display size</span> is 1, and
+   no <code>option</code> elements in the <var>element</var>'s <span
    data-x="concept-select-option-list">list of options</span> have their <span
    data-x="concept-option-selectedness">selectedness</span> set to true, then set the <span
-   data-x="concept-option-selectedness">selectedness</span> of the first <code>option</code>
-   element in the <span data-x="concept-select-option-list">list of options</span> in
-   <span>tree order</span> that is not <span data-x="concept-option-disabled">disabled</span>,
-   if any, to true, and return.</p></li>
+   data-x="concept-option-selectedness">selectedness</span> of the first <code>option</code> element
+   in the <span data-x="concept-select-option-list">list of options</span> in <span>tree
+   order</span> that is not <span data-x="concept-option-disabled">disabled</span>, if any, to true,
+   and return.</p></li>
 
-   <li><p>If <var>element</var>'s <code data-x="attr-select-multiple">multiple</code> attribute is
-   absent, and two or more <code>option</code> elements in <var>element</var>'s <span
+   <li><p>If two or more <code>option</code> elements in <var>element</var>'s <span
    data-x="concept-select-option-list">list of options</span> have their <span
    data-x="concept-option-selectedness">selectedness</span> set to true, then set the <span
    data-x="concept-option-selectedness">selectedness</span> of all but the last <code>option</code>
    element with its <span data-x="concept-option-selectedness">selectedness</span> set to true in
    the <span data-x="concept-select-option-list">list of options</span> in <span>tree order</span>
    to false.</p></li>
+
+   <li><p>Let <var>option</var> be the first <code>option</code> in <var>element</var>'s <span
+   data-x="concept-select-option-list">list of options</span> which has its <span
+   data-x="concept-option-selectedness">selectedness</span> set to true, or null if there is no such
+   <code>option</code>.</p></li>
+
+   <li><p>For each <var>selectedoption</var> in <var>element</var>'s <span>select descendant
+   selectedoption elements</span>, run <span>clone an option into a selectedoption</span> given
+   <var>option</var> and <var>selectedoption</var>.</p></li>
   </ol>
 
   <p>The <dfn>option insertion steps</dfn>, given <var>option</var> and <var>insertionPoint</var>,
@@ -53849,14 +53898,27 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   data-x="concept-option-selectedness">selectedness</span> set to true, if any. If there isn't one,
   then it must return the empty string.</p>
 
-  <p>On setting, the <code data-x="dom-select-value">value</code> attribute must set the <span
-  data-x="concept-option-selectedness">selectedness</span> of all the <code>option</code> elements
-  in the <span data-x="concept-select-option-list">list of options</span> to false, and then the
-  first <code>option</code> element in the <span data-x="concept-select-option-list">list of
-  options</span>, in <span>tree order</span>, whose <span data-x="concept-option-value">value</span>
-  is equal to the given new value, if any, must have its <span
-  data-x="concept-option-selectedness">selectedness</span> set to true and its <span
-  data-x="concept-option-dirtiness">dirtiness</span> set to true.</p>
+  <p>On setting, the <code data-x="dom-select-value">value</code> attribute must run the following
+  steps:</p>
+
+  <ol>
+   <li><p>Set the <span data-x="concept-option-selectedness">selectedness</span> of all the
+   <code>option</code> elements in the <span data-x="concept-select-option-list">list of
+   options</span> to false</p></li>
+
+   <li><p>Let <var>option</var> be the first <code>option</code> element in the <span
+   data-x="concept-select-option-list">list of options</span> in <span>tree order</span> whose <span
+   data-x="concept-option-value">value</span> is equal to the new given value, otherwise
+   null.</p></li>
+
+   <li><p>If <var>option</var> is not null, then set <var>option</var>'s <span
+   data-x="concept-option-selectedness">selectedness</span> to true and its <span
+   data-x="concept-option-dirtiness">dirtiness</span> to true.
+
+   <li><p>For each <var>selectedoption</var> in <var>select</var>'s <span>select descendant
+   selectedoption elements</span>, run <span>clone an option into a selectedoption</span> given
+   <var>option</var> and <var>selectedoption</var>.</p></li>
+  </ol>
 
   <p class="note">This can result in no element having a <span
   data-x="concept-option-selectedness">selectedness</span> set to true even in the case of the
@@ -54375,6 +54437,16 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
    <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>
+
+   <li>
+    <p>For each <var>selectedoption</var> of <var>select</var>'s <span>select descendant
+    selectedoption elements</span>:</p>
+
+    <ol>
+     <li><p>Run <span>clone an option into a selectedoption</span> given <var>option</var> and
+     <var>selectedoption</var>.</p></li>
+    </ol>
+   </li>
   </ol>
 
   <p>The <code>option</code> <span>HTML element insertion steps</span>, given
@@ -54384,8 +54456,9 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
    <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>
+   to true, <code data-x="mo childList">childList</code> set to true, <code data-x="mo
+   subtree">subtree</code> set to true, and <code data-x="mo attributes">attributes</code> set to
+   true.</p></li>
   </ol>
 
   <p>The <code>option</code> <span>HTML element removing steps</span>, given
@@ -56085,6 +56158,115 @@ interface <dfn interface>HTMLLegendElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <h4>The <dfn element><code>selectedoption</code></dfn> element</h4>
+
+  <p>The <code>selectedoption</code> element reflects the contents of a <code>select</code>
+  element's currently selected <code>option</code> element. <code>selectedoption</code> elements can
+  be used to declaratively show the selected <code>option</code> element's contents in a different
+  part of the document, such as the <code>select</code> element's invoker button, with alternate
+  rendering based on different selectors in the author's stylesheet.</p>
+
+  <p>Every time the selected <code>option</code> of a <code>select</code> switches from one option
+  to another, or the currently selected <code>option</code>'s descendant DOM structure mutates, the
+  <code>selectedoption</code> element removes all of its children and replaces them with a new
+  cloned copy of the DOM structure of the <code>select</code>'s selected <code>option</code>
+  element.</p>
+
+  <p><code>selectedoption</code> elements become associated with <code>select</code> elements when
+  the <code>selectedoption</code> is a <span>descendant</span> of the <code>select</code>.</p>
+
+  <!-- TODO add code example(s) -->
+
+  <p>To <dfn>clone an option into a selectedoption</dfn>, given an <code>option</code> element
+  <var>option</var> and a <code>selectedoption</code> element <var>selectedOption</var>:</p>
+
+  <ol>
+   <li><p>Let <var>nodes</var> be « ».</p></li>
+
+   <li>
+    <p>If <var>option</var> is not null, then for each <var>child</var> of <var>option</var>'s <span
+    data-x="concept-tree-child">children</span>:</p>
+
+    <ol>
+     <li><p>Let <var>childClone</var> be the result of running <span
+     data-x="concept-node-clone">clone</span> given <var>child</var>, null, true.</p></li>
+
+     <li><p><span data-x="list append">Append</span> <var>childClone</var> to
+     <var>nodes</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Run <span data-x="dom-parentnode-replacechildren">replaceChildren</span> on
+   <var>selectedOption</var> given <var>nodes</var>.</p></li>
+  </ol>
+
+  <p>The <dfn>selectedoption insertion steps</dfn>, given <var>selectedoption</var> and
+  <var>insertionPoint</var>, are:</p>
+
+  <ol>
+   <li><p>Let <var>firstAncestorSelect</var> be null.</p></li>
+
+   <li><p>Let <var>ancestor</var> be <var>selectedoption</var>'s <span>parent</span>.</p></li>
+
+   <li>
+    <p><span>While</span> <var>firstAncestorSelect</var> is null and <var>ancestor</var> is not
+    null:</p>
+
+    <ol>
+     <li><p>If <var>ancestor</var> is a <code>select</code> element, then set
+     <var>firstAncestorSelect</var> to <var>ancestor</var>.</p></li>
+
+     <li><p>Set <var>ancestor</var> to <var>ancestor</var>'s <span>parent</span>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>If <var>firstAncestorSelect</var> is null, then return.</p></li>
+
+   <li><p><span data-x="list append">Append</span> <var>selectedoption</var> to
+   <var>firstAncestorSelect</var>'s <span>select descendant selectedoption elements</span>.</p></li>
+
+   <li><p>Run <span>clone an option into a selectedoption</span> given the first <code>option</code>
+   in <var>firstAncestorSelect</var>'s <span data-x="concept-select-option-list">list of
+   options</span> whose <span data-x="concept-option-selectedness">selectedness</span> is true and
+   <var>insertedNode</var>.</p></li>
+  </ol>
+
+  <p>The <dfn>selectedoption removal steps</dfn>, given <var>selectedoption</var> and
+  <var>oldParent</var>, are:</p>
+
+  <ol>
+   <li>
+    <p>For each <var>ancestor</var> of <var>selectedoption</var>'s <span
+    data-x="ancestor">ancestors</span>:</p>
+
+    <ol>
+     <li><p>If <var>ancestor</var> is a <code>select</code> element, then return.</p></li>
+    </ol>
+   </li>
+
+   <li>
+    <p>For each <var>ancestor</var> of <var>oldParent</var>'s <span data-x="inclusive
+    ancestor">inclusive ancestors</span>:</p>
+
+    <ol>
+     <li>
+      <p>If <var>ancestor</var> is a <code>select</code> element, then:</p>
+
+      <ol>
+       <li><p><span data-x="list remove">remove</span> <var>selectedoption</var> from
+       <var>ancestor</var>'s <span>select descendant selectedoption elements</span>.</p></li>
+
+       <li><p>Run <span>clone an option into a selectedoption</span> given null and
+       <var>selectedoption</var>.</p></li>
+
+       <li><p>Return.</p></li>
+      </ol>
+     </li>
+    </ol>
+   </li>
+  </ol>
+
+  <!-- TODO: call the thing during selectedness setting algorithm and mutationobserver. -->
 
 
   <h4 split-filename="form-control-infrastructure">Form control infrastructure</h4>