Skip to content

Commit

Permalink
Define the <selectedoption> element
Browse files Browse the repository at this point in the history
  • Loading branch information
@josepharhar
josepharhar committed Aug 7, 2024
1 parent 1dc697c commit bef9083
Showing 1 changed file with 204 additions and 22 deletions.
226 changes: 204 additions & 22 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -53424,6 +53447,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>
Expand Down Expand Up @@ -53470,10 +53496,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
Expand Down Expand Up @@ -53502,23 +53541,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>,
Expand Down Expand Up @@ -53837,14 +53886,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
Expand Down Expand Up @@ -54363,6 +54425,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
Expand All @@ -54372,8 +54444,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
Expand Down Expand Up @@ -56073,6 +56146,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>
Expand Down

0 comments on commit bef9083

Please sign in to comment.