Add selectedoptionattribute for <select> elements

Author: josepharhar

source

@@ -53365,6 +53365,8 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   undefined <span data-x="dom-select-showPicker">showPicker</span>();
 
   readonly attribute <span>NodeList</span> <span data-x="dom-lfe-labels">labels</span>;
+
+  attribute <code data-x="selectedoption">HTMLSelectedOptionElement</code>? <span data-x="dom-selectedoptionelement">selectedOptionElement</span>;
 };</code></pre>
    </dd>
    <dd w-dev>Uses <code>HTMLSelectElement</code>.</dd>
@@ -53426,6 +53428,21 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   <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>To get the <dfn>select target selectedoption elements</dfn>, given a <code>select</code>
+  <var>select</var>:</p>
+
+  <ol>
+   <li><p>Let <var>selectedoptions</var> be <var>select</var>'s <span>select descendant
+   selectedoption elements</span>.</p></li>
+
+   <!-- TODO dom-selectedoptionelement can likely be overriden by script, but the "limited to only
+        known values" getter steps don't seem callable either. -->
+   <li><p><span data-x="list append">Append</span> the value of <var>select</var>'s <code
+   data-x="dom-selectedoptionelement">selectedOptionElement</code>, if it is non-null.</p></li>
+
+   <li><p>Return <var>selectedoptions</var>.</p></li>
+  </ol>
+
   <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>
@@ -53485,7 +53502,7 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
 
    <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
+   <li><p>For each <var>selectedoption</var> in <var>select</var>'s <span>select target
    selectedoption elements</span>, run <span>clone an option into a selectedoption</span> given
    <var>option</var> and <var>selectedoption</var>.</p></li>
   </ol>
@@ -53541,7 +53558,7 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</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
+   <li><p>For each <var>selectedoption</var> in <var>element</var>'s <span>select target
    selectedoption elements</span>, run <span>clone an option into a selectedoption</span> given
    <var>option</var> and <var>selectedoption</var>.</p></li>
   </ol>
@@ -53876,7 +53893,7 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</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
+   <li><p>For each <var>selectedoption</var> in <var>select</var>'s <span>select target
    selectedoption elements</span>, run <span>clone an option into a selectedoption</span> given
    <var>option</var> and <var>selectedoption</var>.</p></li>
   </ol>
@@ -53999,6 +54016,64 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   &hellip;</code></pre>
   </div>
 
+  <h4>The <code data-x="attr-selectedoptionelement">selectedoptionelement</code> attribute</h4>
+
+  <p><code>select</code> elements may have the <dfn element-attr
+  for="select"><code data-x="attr-selectedoptionelement">selectedoptionelement</code></dfn>
+  attribute. When specified its value must be the <span data-x="concept-ID">ID</span> of a
+  <code>selectedoption</code> element in the same <span>tree</span> as the <code>select</code> with
+  the <code data-x="attr-selectedoptionelement">selectedoptionelement</code> attribute. The target
+  <code>selectedoption</code> will update its contents to match the currently selected
+  <code>option</code> of the <code>select</code>.</p>
+
+  <div class="example">
+   <p>The following code shows how the <code
+   data-x="attr-selectedoptionelement">selectedoptionelement</code> attribute can be used to render
+   a <code>select</code> element's value outside of the <code>select</code>:</p>
+
+   <pre><code class="html">&lt;label for="pet-select">Choose a pet:&lt;/label>
+&lt;select id="pet-select" selectedoptionelement="summary-value">
+  &lt;option>dog&lt;/option>
+  &lt;option>cat&lt;/option>
+&lt;/select>
+&lt;p>Summary: you chose the &lt;selectedoption id="summary-value">&lt;/selectedoption>.&lt;p></code></pre>
+  </div>
+
+  <p>The <dfn attribute for="select"><code
+  data-x="dom-selectedoptionelement">selectedOptionElement</code></dfn> IDL attribute must
+  <span>reflect</span> the <code data-x="attr-selectedoptionelement">selectedoptionelement</code>
+  attribute, <span>limited to only known values</span>.</p>
+
+  <p>The following <span data-x="concept-element-attributes-change-ext">attribute change
+  steps</span> given <var>element</var>, <var>localName</var>, <var>oldValue</var>,
+  <var>value</var>, and <var>namespace</var>, are used for <code>select</code> elements:</p>
+
+  <ol>
+   <li><p>If <var>namespace</var> is not null, then return.</p></li>
+
+   <li><p>If <var>localName</var> is not <code
+   data-x="attr-selectedoptionelement">selectedoptionelement</code>, then return.</p></li>
+
+   <li><p>Let <var>oldSelectedoption</var> be the first <code>selectedoption</code> element in
+   <span>tree order</span> in <var>element</var>'s <span>root</span> whose <span
+   data-x="concept-ID">ID</span> is <var>oldValue</var> if one exists, otherwise null.</p></li>
+
+   <li><p>Let <var>newSelectedoption</var> be the first <code>selectedoption</code> element in
+   <span>tree order</span> in <var>element</var>'s <span>root</span> whose <span
+   data-x="concept-ID">ID</span> is <var>value</var> if one exists, otherwise null.</p></li>
+
+   <li><p>If <var>oldSelectedoption</var> is eequal to <var>newSelectedoption</var>, then
+   return.</p></li>
+
+   <li><p>If <var>oldSelectedoption</var> is not null, then run <span>clone an option into a
+   selectedoption</span> given null and <var>oldSelectedOption</var>.</p></li>
+
+   <li><p>If <var>newSelectedoption</var> is not null, then run <span>clone an option into a
+   selectedoption</span> given the value of <var>element</var>'s <code
+   data-x="dom-selectedoptionelement">selectedOptionElement</code> and
+   <var>newSelectedOption</var>.</p></li>
+  </ol>
+
 
 
   <h4>The <dfn element><code>datalist</code></dfn> element</h4>
@@ -54402,7 +54477,7 @@ interface <dfn interface>HTMLOptionElement</dfn> : <span>HTMLElement</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
+    <p>For each <var>selectedoption</var> of <var>select</var>'s <span>select target
     selectedoption elements</span>:</p>
 
     <ol>