Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Define the <selectedcontent> element #10633

Open
wants to merge 27 commits into
base: main
Choose a base branch
from
Open

Define the <selectedcontent> element #10633

Changes from 5 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
21b8a2c
Define the `<selectedoption>` element
josepharhar Sep 18, 2024
1aece11
add dl
josepharhar Sep 27, 2024
a1bd1e8
index
josepharhar Sep 27, 2024
c04ca18
inline replacechildren
josepharhar Oct 4, 2024
09777e2
update content model of button element
josepharhar Oct 4, 2024
c846c3e
add clear a selectedoption
josepharhar Nov 4, 2024
bef82d0
nits
josepharhar Nov 4, 2024
daabd98
allow no selectedoption
josepharhar Nov 4, 2024
bf2b5c5
Merge remote-tracking branch 'upstream/main' into selectedoption
josepharhar Nov 4, 2024
8863966
dont track mutations
josepharhar Nov 4, 2024
17ac232
rename to selectedcontent
josepharhar Nov 4, 2024
4960a77
add parser cloning
josepharhar Nov 4, 2024
10d1a14
improve things
josepharhar Nov 11, 2024
1ee134d
only update first inserted selectedoption
josepharhar Nov 22, 2024
ec5244b
some nits
josepharhar Nov 22, 2024
9463f7e
improve name of option element ancestor select
josepharhar Nov 22, 2024
02b8cde
more nits
josepharhar Nov 22, 2024
e268b44
use post-connection steps
josepharhar Dec 3, 2024
c016a74
Merge branch 'main' into selectedoption
josepharhar Dec 9, 2024
f0984d3
Add disabled concept
josepharhar Dec 9, 2024
d8a05e5
Make value and selectedIndex setters trigger cloning
josepharhar Dec 11, 2024
4126c04
Only update first selectedcontent in tree order
josepharhar Dec 16, 2024
42ef681
fix variable names
josepharhar Dec 16, 2024
961fee3
more variable names
josepharhar Dec 16, 2024
999a14a
Remove removal steps
josepharhar Dec 17, 2024
4a175ce
use more <code>
josepharhar Dec 20, 2024
730b52f
Run more updates on insertion and removal
josepharhar Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
228 changes: 228 additions & 0 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1794,6 +1794,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<span>stack of open elements</span> of an <span>HTML parser</span>, then
<span>process internal resource links</span> given <var>insertedNode</var>'s
<span>node document</span>.</p></li>

<li><p>Run <span>maybe clone option into selectedoption</span> given
<var>insertedNode</var>.</p></li>
</ol>

<p>The <span data-x="concept-node-remove-ext">removing steps</span> for the HTML Standard, given
Expand Down Expand Up @@ -1838,6 +1841,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><p>If <var>removedNode</var>'s <code data-x="attr-popover">popover</code> attribute is not in
the <span data-x="attr-popover-none-state">no popover state</span>, then run the <span>hide
popover algorithm</span> given <var>removedNode</var>, false, false, and false.</p></li>

<li><p>Run <span>maybe clone option into selectedoption</span> given
<var>oldParent</var>.</p></li>
</ol>

<p>A <dfn id="insert-an-element-into-a-document" data-x="node is inserted into a document"
Expand Down Expand Up @@ -3208,6 +3214,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-child" data-x="concept-tree-child">child</dfn> concept</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-root">root</dfn> and <dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-root">shadow-including root</dfn> concepts</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor">inclusive ancestor</dfn>,
<dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-ancestor">ancestor</dfn>,
<dfn data-x-href="https://dom.spec.whatwg.org/#concept-tree-descendant">descendant</dfn>,
<dfn data-x="concept-shadow-including-ancestor" data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-ancestor">shadow-including ancestor</dfn>,
<dfn data-x-href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant">shadow-including descendant</dfn>,
Expand Down Expand Up @@ -3320,6 +3327,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://dom.spec.whatwg.org/#abortcontroller-signal-abort">signal abort</dfn></li>
<li><dfn data-x="AbortSignal-add" data-x-href="https://dom.spec.whatwg.org/#abortsignal-add">add</dfn></li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-element-attributes-get-by-name">get an attribute by name</dfn> algorithm</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#concept-node-ensure-pre-insertion-validity">ensure pre-insertion validity</dfn> algorithm</li>
<li>The <dfn data-x-href="https://dom.spec.whatwg.org/#converting-nodes-into-a-node">convert nodes into a node</dfn> algorithm</li>
</ul>

<p>The following features are defined in <cite>UI Events</cite>: <ref>UIEVENTS</ref></p>
Expand Down Expand Up @@ -52991,6 +53000,8 @@ You cannot submit this form when the field is incorrect.</samp></pre>
<dd><span>Phrasing content</span>, but there must be no <span>interactive content</span>
descendant and no descendant with the <code data-x="attr-tabindex">tabindex</code> attribute
specified.</dd>
<dd>If the element is the first child of a <code>select</code> element, then it must have one
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<code>selectedoption</code> element.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dd><code data-x="attr-fe-disabled">disabled</code></dd>
Expand Down Expand Up @@ -53304,6 +53315,9 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
element, and all the <code>option</code> element children of all the <code>optgroup</code> element
children of the <code>select</code> element, in <span>tree order</span>.</p>

<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 @@ -54156,6 +54170,61 @@ 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>To <dfn>maybe clone option into selectedoption</dfn>, given an <code>Element</code>
<var>element</var>:</p>

<ol>
<li>
<p>For each <var>ancestor</var> of <var>element</var>'s <span
data-x="ancestor">ancestors</span>:</p>

<ol>
<li>
<p>If all of the following conditions are true:</p>

<ul>
<li><p><var>ancestor</var> is an <code>option</code> element;</p></li>

<li><p><var>ancestor</var> has a non-null <span>option element ancestor
select</span>;</p></li>

<li><p><var>ancestor</var>'s <span>option element ancestor select</span> is rendered as a
<span>drop-down box</span>;</p></li>

<li><p><var>ancestor</var>'s <span data-x="concept-option-selectedness">selectedness</span>
is true,</p></li>
</ul>

<p>then for each <var>selectedoption</var> of <var>ancestor</var>'s <span>option element
ancestor select</span>'s <span>select descendant selectedoption elements</span>, run
<span>clone an option into a selectedoption</span> given <var>ancestor</var> and
<var>selectedoption</var>.</p>
</li>
</ol>
</li>
</ol>

<p>Whenever an <code>option</code> <var>option</var>'s <span
data-x="concept-option-selectedness">selectedness</span> is set to true, run <span>maybe clone
option into selectedoption</span> given <var>option</var>.</p>

<dl class="domintro">
<dt><code data-x=""><var>option</var>.<span subdfn data-x="dom-option-selected">selected</span></code></dt>

Expand Down Expand Up @@ -55816,6 +55885,151 @@ interface <dfn interface>HTMLLegendElement</dfn> : <span>HTMLElement</span> {

</div>

<h4>The <dfn element><code>selectedoption</code></dfn> element</h4>

<dl class="element">
<dt><span data-x="concept-element-categories">Categories</span>:</dt>
<dd>None.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>As a descendant of a <code>button</code> element which is a child of a <code>select</code>
element.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd><span data-x="concept-content-nothing">Nothing</span>.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dt><span
data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
<dd><a href="https://w3c.github.io/html-aria/#el-selectedoption">For authors</a>.</dd>
<dd><a href="https://w3c.github.io/html-aam/#el-selectedoption">For implementers</a>.</dd>
<dt><span data-x="concept-element-dom">DOM interface</span>:</dt>
<dd w-nodev>
<pre><code class="idl">[Exposed=Window]
interface <dfn interface>HTMLSelectedOptionElement</dfn> : <span>HTMLElement</span> {
[<span>HTMLConstructor</span>] constructor();
};</code></pre>
</dd>
<dd w-dev>Uses <code>HTMLSelectedOptionElement</code>.</dd>
</dl>

<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
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
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>

<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
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
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>Let <var>convertedNode</var> be the result of <span>convert nodes into a node</span> given
<var>nodes</var> and <var>option</var>'s <span>node document</span>.</p></li>

<li><p><span>Ensure pre-insertion validity</span> of <var>convertedNode</var> into
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<var>selectedOption</var> before null</p></li>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<li><p><span data-x="concept-node-replace-all">Replace all</span> with <var>convertedNode</var>
within <var>selectedOption</var>.</p></li>
</ol>

<p>The <code>selectedoption</code> <span>HTML element insertion steps</span>, given
<var>selectedoption</var>, are:</p>

<ol>
<li><p>Let <var>firstAncestorSelect</var> be null.</p></li>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<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
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<var>insertedNode</var>.</p></li>
</ol>

<p>The <code>selectedoption</code> <span>HTML element removing steps</span>, 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>

<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 all <span>HTML elements</span> in order to
support <code>selectedoption</code> elements:</p>

<ol>
<li><p>Run <span>maybe clone option into selectedoption</span> given <var>element</var>.</p></li>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
</ol>



<h4 split-filename="form-control-infrastructure">Form control infrastructure</h4>
Expand Down Expand Up @@ -139697,6 +139911,16 @@ interface <dfn interface>External</dfn> {
<td><code>HTMLSelectElement</code></td>
</tr>

<tr>
<th><code>selectedoption</code></th>
<td>Mirrors content from an <code>option</code></td>
<td>none</td>
<td><code>button</code></td>
<td>empty</td>
<td><span data-x="global attributes">globals</span></td>
<td><code>HTMLSelectedOptionElement</code></td>
</tr>

<tr>
<th><code>slot</code></th>
<td>Shadow tree slot</td>
Expand Down Expand Up @@ -142482,6 +142706,10 @@ interface <dfn interface>External</dfn> {
<td> <code>select</code>
<td> <code>HTMLSelectElement</code> : <code>HTMLElement</code>

<tr>
<td> <code>selectedoption</code>
<td> <code>HTMLSelectedOptionelement</code> : <code>HTMLElement</code>

<tr>
<td> <code>slot</code>
<td> <code>HTMLSlotElement</code> : <code>HTMLElement</code>
Expand Down