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 7 commits into
base: main
Choose a base branch
from
Open

Update content model for customizable select #10586

Changes from all commits
Commits
Show all changes
7 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
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
121 changes: 107 additions & 14 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12785,6 +12785,82 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
</ul>


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

<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>

<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>

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

<li><code>img</code> elements.</li>
Copy link
Member

Choose a reason for hiding this comment

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

Is the idea to allow img between options?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes. @scottaohara do you think this should be forbidden?

Copy link
Collaborator

Choose a reason for hiding this comment

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

i think people will generally just want images within their options. they'll probably also sometimes want to use them within the legend for optgroups. If it were just up to me, i'd limit their use to being children of these elements.

per discussions that were had on this, the primary use case people seemed to think authors might want them for, outside of options, would be for decorative reasons. but i don't see why that couldn't be done with the allowed divs/spans and CSS.


<li><span>SVG <code>svg</code></span> elements.</li>
</ul>

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

<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><code>hr</code> elements.</li>

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

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

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

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

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

<li><span>SVG <code>svg</code></span> 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>script-supporting elements</span>.</li>

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

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

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

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

<li><span>SVG <code>svg</code></span> elements.</li>
</ul>



<h5>Transparent content models</h5>

Expand Down Expand Up @@ -19774,6 +19850,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>
<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 +21586,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>
<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>
<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>
<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 +24408,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>
<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>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>
<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 +29141,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>
<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>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 +53294,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>
<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 +54021,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>
<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 +54118,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>
<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 +63386,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 +139761,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