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

Jump to bottom

Update content model for customizable select #10586

Open
wants to merge 27 commits into
base: main
Choose a base branch
from
+82 −13
Open

Update content model for customizable select #10586

Changes from 12 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
088b919
Update content model for customizable select
josepharhar Jul 16, 2024
16fadde
add legend element to optgroup
josepharhar Sep 5, 2024
3c57a19
Update content models for div and span
josepharhar Sep 16, 2024
e27ea83
combine select element lines
josepharhar Sep 16, 2024
44225a8
update categories
josepharhar Sep 16, 2024
c7deb50
Fix legend and remove note
josepharhar Sep 16, 2024
e4d071c
add todo to duplicate table
josepharhar Sep 16, 2024
fb7ca7a
remove divs
josepharhar Sep 23, 2024
841e6ff
palpable content except for interactive content
josepharhar Sep 23, 2024
c6c208c
replace span with div
josepharhar Sep 26, 2024
0891d73
remove hr from optgroup because parser pr
josepharhar Sep 26, 2024
787e86f
remove images outside options and replace div with span inside option
josepharhar Sep 27, 2024
bfa1c18
remove outdated categories
josepharhar Oct 14, 2024
a4954ad
stuff
josepharhar Oct 15, 2024
15f67ea
phrasing content
josepharhar Oct 18, 2024
93ebe9e
improve element lists
josepharhar Oct 23, 2024
b6cebc4
make div and span equal again
josepharhar Oct 28, 2024
ced6411
Merge branch 'main' into selectcontentmodel
josepharhar Oct 28, 2024
57dced1
update phrasing except interactive
josepharhar Nov 8, 2024
eb42bf6
remove span from optgroup and select
josepharhar Nov 8, 2024
22b839c
reorder otherwise
josepharhar Nov 8, 2024
f40e975
add comment
josepharhar Nov 8, 2024
19c1c04
fix content model for span
josepharhar Nov 8, 2024
aa9436e
re-add datalist cases in option content model
josepharhar Nov 8, 2024
eab0bc6
legend element improvements
josepharhar Nov 22, 2024
7f9cc16
remove redundant phrasing content text
josepharhar Nov 22, 2024
bed729f
option datalist descendant
josepharhar Nov 22, 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
107 changes: 93 additions & 14 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12785,6 +12785,68 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
</ul>


<h6>Select element inner content elements</h6>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's rather confusing to have both select element and "Select element".

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if I should reference <code>select</code> in the <dfn> for this concept, and I didn't make all of the references to it do that either.

Should I do that instead? Or are there other places where I'm using <code>select</code> that should just be "select"?


<p><dfn>Select element inner content elements</dfn> are <code>option</code> elements and other
elements which are used to group and decorate them with a <code>select</code> element.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This reads weird.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I re-wrote it like this: ... are the elements which are allowed as descendants of select elements.


<p>The following are <span>select element inner content elements</span>:</p>

<ul class="brief category-list">
<li><code>option</code> elements.</li>

<li><code>optgroup</code> elements.</li>

<li><code>hr</code> elements.</li>

<li><span>script-supporting elements</span>.</li>

<li><code>noscript</code> elements.</li>

<li><code>div</code> elements.</li>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
</ul>

<h6>Optgroup element inner content elements</h6>

josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<p><dfn>Optgroup element inner content elements</dfn> are the elements which are allowed as
descendants of <code>optgroup</code> elements.</p>

<p>The following are <span>optgroup element inner content elements</span>:</p>

<ul class="brief category-list">
<li><code>option</code> elements.</li>

<li><span>script-supporting elements</span>.</li>

<li><code>noscript</code> elements.</li>

<li><code>div</code> elements.</li>
</ul>

<h6>Option element inner content elements</h6>

<p><dfn>Option element inner content elements</dfn> are the elements which are allowed as
descendants of <code>option</code> elements.</p>

<p>The following are <span>option element inner content elements</span>:</p>

<ul class="brief category-list">
<li><span>Text content</span>.</li>

<li><span>Palpable content</span> except for <span>interactive content</span>.</li>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved

<li><span>script-supporting elements</span>.</li>

<li><code>noscript</code> elements.</li>

<li><code>span</code> elements.</li>

<li><code>img</code> elements.</li>

<li><span>SVG <code>svg</code></span> elements.</li>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
</ul>



<h5>Transparent content models</h5>

Expand Down Expand Up @@ -19774,6 +19836,8 @@ and is further discussed below.&lt;/div></code></pre>
<dl class="element">
<dt><span data-x="concept-element-categories">Categories</span>:</dt>
<dd><span>Flow content</span>.</dd>
<dd><span>Select element inner content elements</span>.</dd>
<dd><span>Optgroup element inner content elements</span>.</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dd>As a child of a <code>select</code> element.</dd>
Expand Down Expand Up @@ -21508,12 +21572,17 @@ included with Exhibit B.
<dt><span data-x="concept-element-categories">Categories</span>:</dt>
<dd><span>Flow content</span>.</dd>
<dd><span>Palpable content</span>.</dd>
<dd><span>Select element inner content elements</span>.</dd>
<dd><span>Option element inner content elements</span>.</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<dd><span>Optgroup element inner content elements</span>.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dd>As a child of a <code>dl</code> element.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd>If the element is a child of a <code>dl</code> element: one or more <code>dt</code> elements followed by one or more <code>dd</code> elements, optionally intermixed with <span>script-supporting elements</span>.</dd>
<dd>If the element is not a child of a <code>dl</code> element: <span>flow content</span>.</dd>
<dd>Otherwise, if the element is a descendant of an <code>option</code> element: Zero or more <span>option element inner content elements</span>.</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<dd>Otherwise, if the element is a descendant of an <code>optgroup</code> element: Zero or more <span>optgroup element inner content elements</span>.</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<dd>Otherwise: <span>flow content</span>.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dt><span
Expand Down Expand Up @@ -24325,10 +24394,15 @@ wormhole connection.&lt;/mark>&lt;/p></code></pre>
<dd><span>Flow content</span>.</dd>
<dd><span>Phrasing content</span>.</dd>
<dd><span>Palpable content</span>.</dd>
<dd><span>Select element inner content elements</span>.</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<dd><span>Option element inner content elements</span>.</dd>
<dd><span>Optgroup element inner content elements</span>.</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>phrasing content</span> is expected.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd><span>Phrasing content</span>.</dd>
<dd>If the element is a descendant of an <code>option</code> element: Zero or more <span>option element inner content elements</span>.</dd>
<dd>Otherwise, if the element is a descendant of an <code>optgroup</code> element: Zero or more <span>optgroup element inner content elements</span>.</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<dd>Otherwise: <span>Phrasing content</span>.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dt><span
Expand Down Expand Up @@ -29053,6 +29127,9 @@ interface <dfn interface>HTMLSourceElement</dfn> : <span>HTMLElement</span> {
<dd><span>Form-associated element</span>.</dd>
<dd>If the element has a <code data-x="attr-hyperlink-usemap">usemap</code> attribute: <span>Interactive content</span>.</dd>
<dd><span>Palpable content</span>.</dd>
<dd><span>Select element inner content elements</span>.</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<dd><span>Option element inner content elements</span>.</dd>
<dd><span>Optgroup element inner content elements</span>.</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>embedded content</span> is expected.</dd>
<dd>As a child of a <code>picture</code> element, after all <code>source</code> elements.</dd>
Expand Down Expand Up @@ -53203,7 +53280,7 @@ interface <dfn interface>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>phrasing content</span> is expected.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd>Zero or more <code>option</code>, <code>optgroup</code>, <code>hr</code>, and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
<dd>Zero or one <code>button</code> element followed by zero or more <span>select element inner content elements</span>.</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Description of "As first child of select element" should be added to "Contexts in which this element can be used:" of section of "4.10.6 The button element".

In this case, this button element is neither of "Submit Button" state, "Reset Button" state or "Button" state.
Therefore, a fourth state of button element sholud be defined.

In addition, Shouldn't The following sentent be added to section of "4.10.6 The button element"?

If the button element is a fourth state, "popovertarget", "popovertargetaction", "type", "name" and "value" attribute are must not be spedified.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Description of "As first child of select element" should be added to "Contexts in which this element can be used:" of section of "4.10.6 The button element".

Done

In this case, this button element is neither of "Submit Button" state, "Reset Button" state or "Button" state. Therefore, a fourth state of button element sholud be defined.

In addition, Shouldn't The following sentent be added to section of "4.10.6 The button element"?

If the button element is a fourth state, "popovertarget", "popovertargetaction", "type", "name" and "value" attribute are must not be spedified.

Those states are based on the type attribute. Since we didn't add any states when adding popovertarget, I don't think we should add a state here.

I suppose that we could say that the type attribute should not be set when the button is the first child of a select or when it has the popovertarget attribute though? Perhaps as a follow-up?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In "type" attribute of button element, the attribute's missing value default and invalid value default are both the Submit Button state.
Therefore, if "type" attribute would be simply prohibited, button element which is child of select element would be Submit Button state.
Because this is not appropriate, shouldn't the fourth state of button element be defined?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

defining a fourth button type sounds like it could be potential scope creep, but @mtrootyy does make a good point that it is probably worth noting that this button is not a submit button, and that it also probably shouldn't even allow many of the attributes that would be valid for a button in other contexts.

<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dd><code data-x="attr-fe-autocomplete">autocomplete</code></dd>
Expand Down Expand Up @@ -53930,11 +54007,11 @@ interface <dfn interface>HTMLDataListElement</dfn> : <span>HTMLElement</span> {

<dl class="element">
<dt><span data-x="concept-element-categories">Categories</span>:</dt>
<dd>None.</dd>
<dd><span>Select element inner content elements</span>.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>As a child of a <code>select</code> element.</dd>
<dd>As a descendant of a <code>select</code> element.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd>Zero or more <code>option</code> and <span data-x="script-supporting elements">script-supporting</span> elements.</dd>
<dd>Zero or one <code>legend</code> element followed by zero or more <span>optgroup element inner content elements</span>.</dd>
josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dd><code data-x="attr-optgroup-disabled">disabled</code></dd>
Expand Down Expand Up @@ -54027,19 +54104,16 @@ interface <dfn interface>HTMLOptGroupElement</dfn> : <span>HTMLElement</span> {

<dl class="element">
<dt><span data-x="concept-element-categories">Categories</span>:</dt>
<dd>None.</dd>
<dd><span>Select element inner content elements</span>.</dd>
<dd><span>Optgroup element inner content elements</span>.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>As a child of a <code>select</code> element.</dd>
<dd>As a descendant of a <code>select</code> element.</dd>
<dd>As a child of a <code>datalist</code> element.</dd>
<dd>As a child of an <code>optgroup</code> element.</dd>
<dd>As a descendant of an <code>optgroup</code> element.</dd>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Content model:" should become the following.

    If the element has a label attribute and a value attribute: Nothing.
    If the element has a label: Text.
    If the element has no value attribute: Text.
    If the element has no label attribute and has a value attribute: Zero or more option element inner content elements.

Because the submitted value must be simply text, and "option element inner content elements" is only used to decorate label text.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I want to force authors to set a value attribute for simple cases like this:

<select>
  <option><svg>...</svg><span>Purple</span></option>
  <option><svg>...</svg><span>Green</span></option>
</select>

In this case, we can just use the text contents of the option, which would be "purple" and "green", just like we already do without the value attribute.

I suppose it would make sense to enforce that there is either a value attribute or some text node descendant of the option. Do you agree?

Copy link

@mtrootyy mtrootyy Nov 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

<select name="a">
<option value="2^2"><span>2<sup>2</sup></span></option>
<option value="square root of 3"><math><msqrt><mn>3</mn></msqrt></math></option>
</select>

In the above case, if there is no value attribute, the submitted value will be "22","3".

<select name="b">
<option value="female"><del>male</del>,<span>female</span></option>
<option value="male"><span>male</span>,<del>female</del></option>
</select>

In the above case, if there is no value attribute, the submitted value will be "male,female" regardless of which option is selected.

Because there are many cases like this, shouldn't it be enforce to specify the value attribute?

<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd>If the element has a <code data-x="attr-option-label">label</code> attribute and a <code data-x="attr-option-value">value</code> attribute: <span data-x="concept-content-nothing">Nothing</span>.</dd>
<dd>If the element has a <code data-x="attr-option-label">label</code> attribute but no <code data-x="attr-option-value">value</code> attribute: <span data-x="text content">Text</span>.</dd>
<dd>If the element has no <code data-x="attr-option-label">label</code> attribute and is not a
child of a <code>datalist</code> element: <span data-x="text content">Text</span> that is not
<span>inter-element whitespace</span>.</dd>
<dd>If the element has no <code data-x="attr-option-label">label</code> attribute and is a child
of a <code>datalist</code> element: <span data-x="text content">Text</span>.</dd>
<dd>If the element has no <code data-x="attr-option-label">label</code> attribute: Zero or more <span>option element inner content elements</span>.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dd><code data-x="attr-option-disabled">disabled</code></dd>
Expand Down Expand Up @@ -63298,6 +63372,9 @@ not-slash = %x0000-002E / %x0030-10FFFF
<dd><span>Metadata content</span>.</dd>
<dd><span>Flow content</span>.</dd>
<dd><span>Phrasing content</span>.</dd>
<dd><span>Select element inner content elements</span>.</dd>
<dd><span>Option element inner content elements</span>.</dd>
<dd><span>Optgroup element inner content elements</span>.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>In a <code>head</code> element of an <span data-x="HTML documents">HTML document</span>, if there are no ancestor <code>noscript</code> elements.</dd>
<dd>Where <span>phrasing content</span> is expected in <span>HTML documents</span>, if there are no ancestor <code>noscript</code> elements.</dd>
Expand Down Expand Up @@ -139670,6 +139747,8 @@ interface <dfn interface>External</dfn> {
<td><code>HTMLElement</code></td>
</tr>

<!-- TODO update this and other part of this table after the duplicate parts earlier in the spec
are finalized. -->
<tr>
<th><code>select</code></th>
<td>List box control</td>
Expand Down