Define customizable <select>
#10548
Define customizable <select>
#10548
Conversation
josepharhar
force-pushed
the
selectcomplete
branch
from
8be5f47 to
0bee650
Compare
josepharhar
force-pushed
the
selectcomplete
branch
2 times, most recently
from
4691e13 to
bef9083
Compare
josepharhar
force-pushed
the
selectcomplete
branch
from
34be830 to
fed19dc
Compare
|
FYI: I am likely going to remove the author-provided datalist and fallback UA button in this PR soon based on recent discussions, which will likely reduce the number of changes and complexity. |
josepharhar
force-pushed
the
selectcomplete
branch
2 times, most recently
from
d341596 to
6dab95d
Compare
This PR updated the content model for the <select>, <option>, and <optgroup> elements in support of customizable <select>. Fixes whatwg#10317
josepharhar
force-pushed
the
selectcomplete
branch
from
6dab95d to
57e00bf
Compare
josepharhar
force-pushed
the
selectcomplete
branch
2 times, most recently
from
939fe27 to
04e9fcd
Compare
This patch makes the parser allow additional tags in <select> besides <option>, <optgroup>, and <hr>, mostly by removing the "in select" and "in select in table" parser modes. In order to replicate the behavior where opening a <select> tag within another open <select> tag inserts a </select> close tag, a traversal through the stack of open elements was added which I borrowed from the <button> part of the parser. This will need test changes to be implemented in html5lib. Fixes whatwg#10310
josepharhar
force-pushed
the
selectcomplete
branch
2 times, most recently
from
46cddc3 to
50bf192
Compare
There was a problem hiding this comment.
I found two more small issues, but overall this looks good. In the future I'd prefer the occasional rebase and force push over merge commits. It feels very uncertain whether these 179 commits once squashed will have unintended consequences. Hopefully there are none.
@josepharhar I suggest you prepare this PR for landing, superseding the others. The commit message should explain the change and cause the other PRs to get closed.
@smaug---- any more comments from your side?
@domenic @domfarolino are you both happy with the state of this?
| <dt><span data-x="concept-element-content-model">Content model</span>:</dt> | ||
| <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> | ||
| specified. If the element is the first child of a <code>select</code> element, then it may also | ||
| have zero or one <code>selectedcontent</code> element.</dd> |
There was a problem hiding this comment.
I think this is ambiguous with respect to whether this is allowed as child or descendant and how this relates to phrasing content. Maybe @zcorpan has ideas on how to best phrase this?
There was a problem hiding this comment.
I added "descendant" to try making it less ambiguous.
There was a problem hiding this comment.
Similar to the area element, the following is more preferable.
4.10.17 The selectedcontent element
Categories:
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected, but only if there is, in ancestor, button element which is a child of a select element.
source
Outdated
| descendant of a <code>datalist</code> element: Zero or more <span><code>option</code> element | ||
| inner content elements</span>.</dd> | ||
| <dd>If the element has no <code data-x="attr-option-label">label</code> attribute and is a | ||
| descendant of a <code>datalist</code> element: <span data-x="text content">Text</span>.</dd> |
There was a problem hiding this comment.
Above we state it can only be a child of a datalist element (conformance-wise), so this seems incorrect.
There was a problem hiding this comment.
Thanks, I changed it from descendant to child here and above for the datalist cases
annevk
added
addition/proposal
josepharhar
changed the title
<select><select>
Done, thanks! |
| <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> | ||
| child of a <code>datalist</code> element: Zero or more <span><code>option</code> element | ||
| inner content elements</span>.</dd> |
There was a problem hiding this comment.
The following is conformance?
<label> Animal:<input name=animal list=animals></label>
<datalist id=animals>
<label>or select from the list:
<select name=animal>
<option><img src="cat.jpg" alt="cat"></option>
<option><div>dog<br><small>(but except child dog)</small></div></option>
</select>
</label>
</datalist>
There was a problem hiding this comment.
The option element is not a child of a datalist element, so it falls into the "zero or more option element inner content elements" case, so it's allowed to have the child img and div in your example. Does that answer your question?
There was a problem hiding this comment.
When such option element is displayed as suggestion by datalist element, how is it rendered?
This defines several concepts related to customizable
<select>:<select><select>and related elements.<select><selectedcontent>HTML element<select>with base appearanceCloses #9799
Closes #10557
Closes #10310
Closes #10586
Closes #10317
Closes #10629
Closes #10633
Closes #10520
Closes #10670
Closes #10520
Closes #10762
<select>parser WebKit/standards-positions#414<select>parser mozilla/standards-positions#1086/dom.html ( diff )
/form-control-infrastructure.html ( diff )
/form-elements.html ( diff )
/grouping-content.html ( diff )
/index.html ( diff )
/indices.html ( diff )
/infrastructure.html ( diff )
/interactive-elements.html ( diff )
/parsing.html ( diff )
/references.html ( diff )
/rendering.html ( diff )
/scripting.html ( diff )
/text-level-semantics.html ( diff )