MouseEvent interfaceMouseEvent interface's relatedTarget attributeMouseEvent interface's button attributeMouseEventInit dictionary typeFocusEvent interfaceThe following features are defined in CSS Forms: + CSSFORMS
+ +The following features are defined in CSS Grid Layout: CSSGRID
sampscriptselectselectedcontent (if it is a descendant of a button in a
+ select)slotsmallspanselect element inner content elementsselect element inner content elements are the elements which are
+ allowed as descendants of select elements.
The following are select element inner content elements:
optionoptgrouphrnoscriptdivoptgroup element inner content elementsoptgroup element inner content elements are the elements which are
+ allowed as descendants of optgroup elements.
The following are optgroup element inner content elements:
optionnoscriptdivoption element inner content elementsoption element inner content elements are the elements which are
+ allowed as descendants of option elements.
The following are option element inner content elements:
divThe following are excluded from option element inner content
+ elements:
datalistobjecttabindex attribute specifiedselect elements have an associated non-replaced inline CSS box
whose child boxes include only those of optgroup and option element
- child nodes;
optgroup elements have an associated non-replaced block-level CSS
- box whose child boxes include only those of option element child nodes;
- and
option element descendant
+ nodes; and
the option elements have an associated non-replaced block-level CSS
box whose child boxes are as normal for non-replaced block-level
select element inner content elements.select element.select element inner content elements.optgroup element inner content elements.option element inner content elements.dl element.dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.dl element: flow content.dl element: One or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.option element: Zero or more
+ option element inner content elements.optgroup element: Zero or more
+ optgroup element inner content elements.select element: Zero or more
+ select element inner content elements.option element: Zero or more
+ option element inner content elements, except div
+ elements.select element.tabindex attribute
- specified.select element, then it may also
+ have zero or one descendant selectedcontent element.
command
state, both the type attribute is in the Auto state and both the Autocommand and commandfor content attributes are not present;
+ data-x="attr-button-commandfor">commandfor content attributes are not present, and the
+ parent node is not a select element;
or
the A custom command keyword is a string that
starts with " If a A The display size of a The list of options for a The The If a Constraint validation: If the element has its The reset algorithm for a Set selectElement's user validity to false. If the For each optionElement of
+ selectElement's list of
+ options: If optionElement has a Set optionElement's dirtiness
+ to false. Run the selectedness setting algorithm given
+ selectElement. A The user agent should allow the user to pick an To pick an option given a If select has the If event is not null and event's canceled flag is set,
+ then return. If event is a Set option's selectedness to
+ true. Set option's dirtiness to
+ true. Send If select is being rendered as a drop-down box with base
+ appearance, then run the hide popover algorithm given select's
+ select popover. If the The selectedness setting algorithm, given a If element's If element's The If the If insertedNode's parent is a If event's canceled flag is set, then return. The If event's If oldParent is a Run the show popover algorithm given select's select
+ popover, false, and select. The If the Run the Run the If event's canceled flag is set, then return. The If oldParent is a Run the focusing steps on newOption. The Implementations commonly allow the user to focus the next or previous option via
+ the arrow-up and arrow-down keys, focus the first or last option via the Home or End keys, or
+ focus the first or last option in the viewport of the picker via the PageUp or PageDown keys. Run the If an Which particular keys of the keyboard cause these actions might differ across
+ implementations and platforms. The ARIA Authoring Practices Guide has good recommendations
+ for this behavior. If the When the user agent is to send Fire an event named Fire an event named The display size of a The reset algorithm for a To get the list of options given a
+ Set selectElement's user validity to false. Let options be « ». Let node be the first child of select in tree
+ order. For each optionElement of
- selectElement's list of
- options: While node is not null: If optionElement has a If node is an Set optionElement's dirtiness
- to false. If any of the following conditions are true: node is a node is an node is an node is an then set node to the next descendant of select in
+ tree order, excluding node's descendants, if any such node exists; otherwise null. Otherwise, set node to the next descendant of select in
+ tree order, if any such node exists; otherwise null. Run the selectedness setting algorithm given
- selectElement. Return options. If an
- The The selectedness setting algorithm, given a A If element's If element's To send Run update a Run clone selected Fire an event named Fire an event named type attribute is in the HTMLButtonElement : HTMLElement {
--".button element is the first child
+ which is an element of a select element, then it is
+ inert.button element element's activation behavior given
@@ -54001,7 +54104,9 @@ interface HTMLButtonElement : HTMLElement {
option, optgroup, hr, and script-supporting elements.button elements if the select is a drop-down
+ box, followed by zero or more select element inner content
+ elements.autocompleteselect element is the
- result of applying the rules for parsing non-negative integers to the value of
- element's size attribute, if it has one and parsing it is
- successful. If applying those rules to the attribute's value is not successful, or if the size attribute is absent, then the element's display size is 4 if the element's multiple content attribute is present, and 1 otherwise.select
- element consists of all the option element children of the select
- element, and all the option element children of all the optgroup element
- children of the select element, in tree order.required
attribute is a boolean attribute. When specified, the user will be required to select
a value before submitting the form.form attribute is used to explicitly associate the
+ select element with its form owner. The name attribute represents the element's name. The disabled attribute is used to make the control non-interactive
+ and to prevent its value from being submitted. The autocomplete attribute controls how the user agent provides
+ autofill behavior.select element has a required
attribute specified, does not have a multiple attribute
specified, and has a display size of 1; and if the HTMLSelectElement : HTMLElement {
+
required attribute specified, and either none of the
option elements in the select element's HTMLSelectElement : HTMLElement {
data-x="concept-option-selectedness">selectedness set to true is the placeholder label
option, then the element is suffering from being missing.select
+ element selectElement is:
+
+
+ multiple attribute is absent, and the element
- is not disabled, then the user agent should allow the
- user to pick an option element in its list
- of options that is itself not disabled. Upon
- this option element being picked (either
- through a click, or through unfocusing the element after changing its value, or through a menu command, or through any other mechanism), and before the
- relevant user interaction event is queued (e.g. before the
- click event), the user agent must set the selectedness of the picked option element
- to true, set its dirtiness to true, and then
- send select update notifications.
+
+ selected
+ attribute, then set optionElement's selectedness to true; otherwise set it to
+ false.select element that is not disabled is
+ mutable.
+
+ option element from a
+ select element in its list of
+ options (either through a click, or through unfocusing the element after changing its
+ value, or through a menu command, or through any other
+ mechanism) by running the pick an option algorithm given
+ the select element, the option element, and if select and
+ its select popover are both being rendered with base appearance, a
+ corresponding keydown or mouseup event, otherwise null.select element
+ select, an option element option, and an Event or
+ null event:
+
multiple attribute
+ or select is disabled, then return.MouseEvent and event's button attribute is not 1, then return.select update notifications given
+ select.multiple attribute is absent, whenever an
option element in the select element's HTMLSelectElement : HTMLElement {
false, set its dirtiness to true, and then
send select update notifications.select element
- element, is to run the following steps:
-
-
- multiple attribute is
- absent, and element's display size is 1,
- and no option elements in the element's list of options have their selectedness set to true, then set the selectedness of the first option
- element in the list of options in
- tree order that is not disabled,
- if any, to true, and return.multiple attribute is
- absent, and two or more option elements in element's list of options have their selectedness set to true, then set the selectedness of all but the last option
- element with its selectedness set to true in
- the list of options in tree order
- to false.option HTML element insertion
- steps, given insertedNode, are:select is being rendered as a drop-down box with base
+ appearance, then the user agent should allow the user to open the picker given a corresponding select
+ element select and a corresponding mousedown or
+ keydown event event:
-
+ select element, or
- insertedNode's parent is an optgroup element whose parent is a
- select element, then run that select element's selectedness
- setting algorithm.option HTML element removing
- steps, given removedNode and oldParent, are:button attribute is not
+ 1, then return.
-
- select element, or oldParent is an
- optgroup element whose parent is a select element, then run that
- select element's selectedness setting algorithm.option HTML element moving steps, given movedNode and
- oldParent, are:select is being rendered as a drop-down box with base
+ appearance, then the user agent should allow the user to focus another option
+ given the new option element to focus option and a keydown event event:
-
+ option HTML element removing steps given
- movedNode and oldParent.option HTML element insertion steps given
- movedNode.optgroup HTML element removing
- steps, given removedNode and oldParent, are:
-
- select element and removedNode has an
- option child, then run oldParent's selectedness setting
- algorithm.optgroup HTML element moving steps, given movedNode
- and oldParent, are:
-
-
- optgroup HTML element removing steps given
- movedNode and oldParent.option element in the list of
- options asks for a reset, then run that
- select element's selectedness setting algorithm.multiple attribute is present, and the
element is not disabled, then the user agent should
@@ -54265,60 +54376,113 @@ interface HTMLSelectElement : HTMLElement {
data-x="concept-option-dirtiness">dirtiness of the element must be set to true, and the
user agent must send select update notifications.select update notifications, queue
- an element task on the user interaction task source given the select
- element to run these steps:
-
+ select element's user validity to true.input at the select element, with the bubbles and composed
- attributes initialized to true.
- change at the select element, with the bubbles attribute initialized to true.select element is the
+ result of applying the rules for parsing non-negative integers to the value of
+ element's size attribute, if it has one and parsing it is
+ successful. If applying those rules to the attribute's value is not successful, or if the size attribute is absent, then the element's display size is 4 if the element's multiple content attribute is present, and 1 otherwise.select
- element selectElement is:select element select:
-
-
-
selected
- attribute, then set optionElement's selectedness to true; otherwise set it to
- false.option element, then append node to options.
+
+
+ select element;hr element;option element;optgroup element and node has an
+ ancestor optgroup in between itself and select,option element in the list of
+ options asks for a reset, then run that
+ select element's selectedness setting algorithm.form attribute is used to explicitly associate the select element with its form owner.
- The name attribute represents the element's name.
- The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted.
- The autocomplete attribute controls how the user agent provides autofill behavior.
- select element
+ element, is to run the following steps:select element that is not disabled is
- mutable.
+
+
+ multiple attribute is
+ absent, and element's display size is 1,
+ and no option elements in the element's list of options have their selectedness set to true, then set the selectedness of the first option
+ element in the list of options in
+ tree order that is not disabled,
+ if any, to true, and return.multiple attribute is
+ absent, and two or more option elements in element's list of options have their selectedness set to true, then set the selectedness of all but the last option
+ element with its selectedness set to true in
+ the list of options in tree order
+ to false.select update notifications for a select element
+ element, queue an element task on the user interaction task
+ source given element to run these steps:
+
+
+ select's selectedcontent given
+ element.option into select button given
+ element.input at element, with the bubbles and composed
+ attributes initialized to true.change at element, with the bubbles attribute initialized to true.
select.type
The selectedIndex IDL attribute, on getting, must
- return the index of the first option
- element in the list of options in tree
+ data-x="dom-select-selectedIndex">selectedIndex getter steps are to return the index of the first option element in
+ this's list of options in tree
order that has its selectedness set to
- true, if any. If there isn't one, then it must return −1.
On setting, the selectedIndex attribute must set
- the selectedness of all the option
- elements in the list of options to false, and
- then the option element in the list of
- options whose index is the given new value, if
- any, must have its selectedness set to true and
- its dirtiness set to true.
The selectedIndex setter steps are:
Let firstMatchingOption be null.
For each option of this's list of options:
+ +Set option's selectedness + to false.
If firstMatchingOption is null and option's index is equal to the given value, then set + firstMatchingOption to option.
If firstMatchingOption is not null, then set firstMatchingOption's + selectedness to true and set + firstMatchingOption's dirtiness to + true.
Run update a select's selectedcontent given
+ this.
This can result in no element having a selectedness set to true even in the case of the @@ -54503,20 +54687,39 @@ interface HTMLSelectElement : HTMLElement { attribute and a display size of 1.
The value
- IDL attribute, on getting, must return the value of the
- first option element in the list of
- options in tree order that has its selectedness set to true, if any. If there isn't one,
- then it must return the empty string.
On setting, the value attribute must set the selectedness of all the option elements
- in the list of options to false, and then the
- first option element in the list of
- options, in tree order, whose value
- is equal to the given new value, if any, must have its selectedness set to true and its dirtiness set to true.
option element in this's list of options in tree order that has its
+ selectedness set to true, if any. If there isn't
+ one, then return the empty string.
+
+ The value setter steps are:
Let firstMatchingOption be null.
For each option of this's list of options:
+ +Set option's selectedness + to false.
If firstMatchingOption is null and option's value is equal to the given value, then set + firstMatchingOption to option.
If firstMatchingOption is not null, then set firstMatchingOption's + selectedness to true and set + firstMatchingOption's dirtiness to + true.
Run update a select's selectedcontent given
+ this.
This can result in no element having a selectedness set to true even in the case of the @@ -54552,6 +54755,8 @@ interface HTMLSelectElement : HTMLElement { +
The following example shows how a select element can be used to offer the user
@@ -54636,6 +54841,10 @@ interface HTMLSelectElement : HTMLElement {
…
The first child button
+ element as allowed by the content model of select is not a submit button. It is used
+ to replace the in-page rendering of the select element. Its form submission behavior
+ is prevented because it is inert.
datalist elementselect element inner content elements.select element.select element.option and script-supporting elements.legend element followed by zero or more optgroup
+ element inner content elements.disabledoption elements together.
The label
- attribute must be specified. Its value gives the name of the group, for the purposes of the user
- interface. User agents should use this attribute's value when labeling the group of
- option elements in a select element.
optgroup has no child legend
+ element.
The optgroup HTML element removing
+ steps, given removedNode and oldParent, are:
If oldParent is a select element and removedNode has an
+ option child, then run oldParent's selectedness setting
+ algorithm.
The optgroup HTML element moving steps, given movedNode
+ and oldParent, are:
Run the optgroup HTML element removing steps given
+ movedNode and oldParent.
To get an optgroup element's label,
+ given an optgroup optgroup:
If optgroup has a child legend element, then return the result of
+ stripping and collapsing ASCII
+ whitespace from the concatenation of data of all the
+ Text node descendants of optgroup's first child legend
+ element, in tree order, excluding any that are descendants of descendants of the
+ legend that are themselves script or SVG
+ script elements.
Otherwise, return the value of optgroup's label attribute.
The value of the optgroup label
+ algorithm gives the name of the group, for the purposes of the user interface. User agents should use this attribute's value when labeling the group of
+ option elements in a select element.
There is no way to select an optgroup element. Only
option elements can be selected. An optgroup element merely provides a
label for a group of option elements.
select element inner content elements.optgroup element inner content elements.select element.datalist element.optgroup element.select element.datalist element.optgroup element.label attribute and a value attribute: Nothing.label attribute but no value attribute: Text.label attribute and is not a
- child of a datalist element: Text that is not
- inter-element whitespace.label attribute and is a child
- of a datalist element: Text.datalist element: Zero or more option element
+ inner content elements.
+ label attribute and is a
+ descendant of a datalist element: Text.disabledThe value
attribute provides a value for element. The value of an
option element is the value of the value
- content attribute, if there is one, or, if there is not, the value of the element's text IDL attribute.
The The For each ancestor of insertedOption's ancestors in reverse tree order: If ancestor is a The For each ancestor of oldParent's inclusive ancestors in reverse tree order: If ancestor is a The Run the Run the To get the For each ancestor of option's ancestors,
+ in reverse tree order: If ancestor is a Return null. To maybe clone an Let select be option's If all of the following conditions are true: select is not null; option's selectedness is
+ true; and select's enabled
+ then run clone an To clone selected Let option be the first element of select's option list whose selectedness is set to true, if such an element
+ exists; otherwise null. Let text be the empty string. If option is not null, then set text to option's label. Set select's select fallback button text to
+ text. The The The The The The Return option. To collect option text, given an Let text be the empty string. For each descendant of option in tree order: If descendant is a If descendant is a If descendant is an If the value of descendant's Continue skipping all descendants of
+ descendant. Return the result of strip and collapse ASCII whitespace given
+ text. When no The selected
attribute is a boolean attribute. It represents the default HTMLOptionElement : HTMLElement {
+ option HTML element insertion steps, given
+ insertedOption, are:
+
+
+
+
+ select element, then run the selectedness
+ setting algorithm given ancestor and return.option HTML element removing steps, given
+ removedOption and oldParent, are:
+
+
+
+
+ select element, then run the selectedness
+ setting algorithm given ancestor and return.option HTML element moving steps, given movedNode and
+ oldParent, are:
+
+
+ option HTML element removing steps given
+ movedNode and oldParent.option HTML element insertion steps given
+ movedNode.option element nearest ancestor select given an
+ option option, run these steps. They return a select or
+ null.
+
+
+
+
+ select, then return
+ ancestor.option into selectedcontent, given an
+ option option:
+
+
+ option element nearest
+ ancestor select.
+
+
+ selectedcontent is not null,option into a selectedcontent given
+ option and select's enabled
+ selectedcontent.option into select button, given a
+ select element select:
+
+
option.selectedindex
IDL attribute must return the element's index.text IDL
- attribute, on getting, must return the result of stripping and collapsing ASCII whitespace from the concatenation of data of all the Text node descendants of the
- option element, in tree order, excluding any that are descendants of
- descendants of the option element that are themselves script or
- SVG script elements.text
+ getter steps are to return the result of collect option text given this
+ and false.text attribute's setter must string replace
- all with the given value within this element.text setter steps are to string replace
+ all with the given value within this.form IDL
attribute's behavior depends on whether the option element is in a
@@ -55102,8 +55448,55 @@ interface HTMLOptionElement : HTMLElement {
option element option and a
+ boolean includeAltText:
+
+
+
+
+ script or SVG
+ script element, then continue skipping all descendants of descendant.Text node, then set text to the
+ concatenation of text and descendant's data.img element and includeAltText is
+ true, then:
+
+ alt
+ attribute is not empty, then set text to the concatenation of text,
+ " ", the value of descendant's alt attribute, and " ".value
+ attribute is set on the option element, its text contents are used to generate a
+ submittable value. In the case that the option element has child elements, this can
+ lead to unexpected results such as option elements which render differently but have
+ the same value. In order to address this, setting the value attribute on option elements is
+ recommended.The
@@ -56591,8 +56984,13 @@ interface HTMLFieldSetElement : HTMLElement {
textarea elementfieldset element.optgroup element.optgroup element: Phrasing content,
+ but there must be no interactive content and no descendant with the tabindex attribute.legend element represents a caption for the rest of the contents
of the legend element's parent fieldset element, if
- any.legend has a parent optgroup element, then
+ the legend represents the optgroup's label.
legend.formselectedcontent elementbutton element which is a child of a select
+ element.[Exposed=Window]
+interface HTMLSelectedContentElement : HTMLElement {
+ [HTMLConstructor] constructor();
+};HTMLSelectedContentElement.The selectedcontent element reflects the contents of a select
+ element's currently selected option element. selectedcontent elements
+ can be used to declaratively show the selected option element's contents within the
+ select element's first child button element.
The option element's label
+ attribute can be used to render a visible label for the option, but the
+ selectedcontent element will not reflect the content of the label attribute.
Every time the selected option of a select switches from one
+ option to another, the selectedcontent element removes all of its children and
+ replaces them with a new copy of the DOM structure of the select's selected
+ option element.
Every selectedcontent element has a disabled state, which is a boolean, initially set to
+ false.
To update a select's selectedcontent given a
+ select element select:
Let selectedcontent be the result of get a select's enabled
+ selectedcontent given select.
If selectedcontent is null, then return.
Let option be the first option in select's list of options whose selectedness is true, if any such option
+ exists, otherwise null.
If option is null, then run clear a selectedcontent
+ given selectedcontent.
Otherwise, run clone an option into a selectedcontent given
+ option and selectedcontent.
To get a select's enabled
+ selectedcontent given a select element select:
If select has the multiple
+ attribute, then return null.
Let selectedcontent be the first selectedcontent element
+ descendant of select in tree order if any such element
+ exists; otherwise return null.
If selectedcontent is disabled, + then return null.
Return selectedcontent.
To clone an option into a selectedcontent, given an
+ option element option and a selectedcontent element
+ selectedcontent:
Let documentFragment be a new DocumentFragment whose node
+ document is option's node document.
For each child of option's children:
+ +Let childClone be the result of running clone given child with subtree set to true.
Append childClone to + documentFragment.
Replace all with + documentFragment within selectedcontent.
To clear a selectedcontent given a selectedcontent element
+ selectedcontent:
Replace all with null within + selectedcontent.
To clear a select's non-primary selectedcontent elements,
+ given a select element select:
Let passedFirstSelectedcontent be false.
For each descendant of select's descendants in tree order that is a
+ selectedcontent element:
If passedFirstSelectedcontent is false, then set + passedFirstSelectedcontent to true.
Otherwise, run clear a selectedcontent given
+ descendant.
The selectedcontent HTML element post-connection steps, given
+ selectedcontent, are:
Let nearestSelectAncestor be null.
Let ancestor be selectedcontent's parent.
Set selectedcontent's disabled + state to false.
For each ancestor of selectedcontent's ancestors, in reverse tree order:
+ +If ancestor is a select element:
If nearestSelectAncestor is null, then set nearestSelectAncestor + to select.
Otherwise, set selectedcontent's disabled state to true.
If ancestor is an option element or a
+ selectedcontent element, then set selectedcontent's disabled state to true.
If nearestSelectAncestor is null or nearestSelectAncestor has the
+ multiple attribute, then return.
Run update a select's selectedcontent given
+ nearestSelectAncestor.
Run clear a select's non-primary selectedcontent
+ elements given nearestSelectAncestor.
The selectedcontent HTML element removing steps, given
+ selectedcontent and oldParent, are:
For each ancestor of selectedcontent's ancestors, in reverse tree order:
+ +If ancestor is a select element, then return.
For each ancestor of oldParent's inclusive ancestors, in reverse tree order:
+ +If ancestor is a select element, then run update a
+ select's selectedcontent given ancestor and
+ return.
select element inner content elements.optgroup element inner content elements.head element of an HTML document, if there are no ancestor noscript elements.noscript elements.Several of these modes, namely "in head", "in body", "in - table", and "in select", are special, in - that the other modes defer to them at various times. When the algorithm below says that the user - agent is to do something "using the rules for the m insertion - mode", where m is one of these modes, the user agent must use the rules - described under the m insertion mode's section, but must leave - the insertion mode unchanged unless the rules in m themselves - switch the insertion mode to a new value.
+ data-x="insertion mode: in body">in body", and "in + table", are special, in that the other modes defer to them at various times. When the + algorithm below says that the user agent is to do something "using the rules for the + m insertion mode", where m is one of these modes, the user agent must use + the rules described under the m insertion mode's section, but must leave + the insertion mode unchanged unless the rules in m themselves switch the + insertion mode to a new value.When the insertion mode is switched to "text" or "in table text", the original insertion @@ -128037,37 +128642,6 @@ dictionary StorageEventInit : EventInit { parsing algorithm (fragment case), set node to the context element passed to that algorithm.
If node is a select element, run these substeps:
If last is true, jump to the step below labeled - done.
Let ancestor be node.
Loop: If ancestor is the first node in the stack of - open elements, jump to the step below labeled done.
Let ancestor be the node before ancestor in the - stack of open elements.
If ancestor is a template node, jump to the step below
- labeled done.
If ancestor is a table node, switch the insertion
- mode to "in select in table"
- and return.
Jump back to the step labeled loop.
Done: Switch the insertion mode to "in select" and return.
If node is a td or th element and last is
false, then switch the insertion mode to "in
cell" and return.
thmarqueeobjectselecttemplatemimotemplate in the HTML namespaceThe stack of open elements is said to have a particular element in select scope when it has that element in the specific scope consisting of all element types - except the following:
- -optgroup in the HTML namespaceoption in the HTML namespaceNothing happens if at any time any of the elements in the stack of open elements
are moved to a new location in, or removed from, the Document tree. In particular,
the stack is not changed in this situation. This can cause, amongst other strange effects, content
@@ -132666,7 +133230,7 @@ document.body.appendChild(text);
If the stack of open elements does not
If the parser was created as part of the HTML fragment parsing algorithm
+ (fragment case) and the context
+ element passed to that algorithm is a Parse error. Ignore the token. Return. If the stack of open elements has a
+ Parse error. Pop elements from the stack of open elements until a Reconstruct the active formatting elements, if any. Insert an HTML element for the token. Immediately pop the current
@@ -132985,6 +133571,18 @@ document.body.appendChild(text);
If the stack of open elements has a
+ Generate implied end tags. If the stack of open elements has an
+ Insert an HTML element for the token. Immediately pop the current
node off the stack of open elements. Reconstruct the active formatting elements, if any. If the parser was created as part of the HTML fragment parsing algorithm
+ (fragment case) and the context
+ element passed to that algorithm is a Insert an HTML element for the token. Parse error. Set the frameset-ok flag to "not ok". Ignore the token. Otherwise, if the stack of open elements has a Parse error. Ignore the token. Pop elements from the stack of open elements until a Otherwise: Reconstruct the active formatting elements, if any. Insert an HTML element for the token. Set the frameset-ok flag to "not ok". If the stack of open elements has a
+ Generate implied end tags except for If the stack of open elements has an
+ Otherwise: If the current node is an Reconstruct the active formatting elements, if any. If the insertion mode is one of "in
- table", "in caption", "in table body", "in row", or "in cell", then switch the
- insertion mode to "in select in
- table". Otherwise, switch the insertion mode to "in select". Insert an HTML element for the token. If the current node is an If the stack of open elements has a
+ Generate implied end tags. If the stack of open elements has an
+ Otherwise, if the current node is an Reconstruct the active formatting elements, if any. Insert an HTML element for the token. Let option be the first Run the steps for "any other end tag." If option is no longer in the stack of open elements, then run
+ maybe clone an option into selectedcontent given option. If the stack of open elements has a
@@ -134224,239 +134888,6 @@ document.body.appendChild(text);
same time, nor can it have neither when the close the cell algorithm is invoked. When the user agent is to apply the rules for the "in
- select" insertion mode, the user agent must handle the token as follows: Parse error. Ignore the token. Insert the token's character. Insert a comment. Parse error. Ignore the token. Process the token using the rules for the "in body" insertion mode. If the current node is an Insert an HTML element for the token. If the current node is an If the current node is an Insert an HTML element for the token. If the current node is an If the current node is an Insert an HTML element for the token. Immediately pop the current
- node off the stack of open elements. Acknowledge the token's self-closing flag, if it is set. First, if the current node is an If the current node is an If the current node is an If the stack of open elements does not have a Otherwise: Pop elements from the stack of open elements until a Reset the insertion mode appropriately. Parse error. If the stack of open elements does not have a Otherwise: Pop elements from the stack of open elements until a Reset the insertion mode appropriately. It just gets treated like an end tag. Parse error. If the stack of open elements does not have a Otherwise: Pop elements from the stack of open elements until a Reset the insertion mode appropriately. Reprocess the token. Process the token using the rules for the "in head" insertion mode. Process the token using the rules for the "in body" insertion mode. Parse error. Ignore the token. When the user agent is to apply the rules for the "in select in table" insertion mode, the user agent must handle the
- token as follows: Parse error. Pop elements from the stack of open elements until a Reset the insertion mode appropriately. Reprocess the token. Parse error. If the stack of open elements does not have an element in table scope that is an HTML
- element with the same tag name as that of the token, then ignore the token. Otherwise: Pop elements from the stack of open elements until a Reset the insertion mode appropriately. Reprocess the token. Process the token using the rules for the "in select" insertion mode. When the user agent is to apply the rules for the "in
@@ -138793,8 +139224,8 @@ details[open] > summary:first-of-type {
The structure of this shadow tree is observable through the ways that the children
- of the select element:
+
+
+ select element in scope:
+
+
select
+ element has been popped from the stack.p element in button scope, then close a p
element.select element in scope:
+
+
option element in scope or has an
+ optgroup element in scope, then this is a parse
+ error.select element:
+
+
+ select element in scope:
+
+
+ select
+ element has been popped from the stack.
+
+ select element in scope:
+
+
+ optgroup
+ elements.option element in scope, then this is a parse error.
+
+
+ option element, then pop the
+ current node off the stack of open elements.option element, then pop the
- current node off the stack of open elements.select element in scope:
+
+
+ option element in scope or has an
+ optgroup element in scope, then this is a parse
+ error.option element, then pop the
+ current node from the stack of open elements.option element in the stack of open
+ elements.The "in select" insertion mode
-
-
-
-
-
-
- option element, pop that node from the
- stack of open elements.option element, pop that node from the
- stack of open elements.optgroup element, pop that node from the
- stack of open elements.option element, pop that node from the
- stack of open elements.optgroup element, pop that node from the
- stack of open elements.option element, and the node
- immediately before it in the stack of open elements is an optgroup
- element, then pop the current node from the stack of open
- elements.optgroup element, then pop that node from
- the stack of open elements. Otherwise, this is a parse error; ignore
- the token.option element, then pop that node from
- the stack of open elements. Otherwise, this is a parse error; ignore
- the token.select element in select scope, this is a parse
- error; ignore the token. (fragment case)
-
- select element
- has been popped from the stack.select element in select scope, ignore the token.
- (fragment case)
-
- select element
- has been popped from the stack.select element in select scope, ignore the token.
- (fragment case)
-
- select element
- has been popped from the stack.The "in select in table" insertion mode
-
-
-
-
-
-
-
select element
- has been popped from the stack.
-
-
- select element
- has been popped from the stack.The "in template" insertion mode
details element and the '::details-content' pseudo-element respond to CSS
- styles.details element and the '::details-content' pseudo-element
+ respond to CSS styles.optgroup element children
providing headers for groups of options where applicable.
select elements which render as a drop-down box support a base
+ appearance in addition to native appearance and primitive
+ appearance.
The select element's select popover supports a base
+ appearance and a native appearance. The select popover can only
+ be rendered with base appearance if its associated select is being
+ rendered with base appearance.
When a select is being rendered as a drop-down box with base
+ appearance, it is expected to render with a shadow tree that contains the
+ following elements:
A select button slot, which is a slot element. It is appended to
+ the select's shadow root as the first child. It is expected to take the
+ first child element of the select if the first child element is a
+ button, otherwise the select fallback button text.
A select fallback button text, which is a div element. It is
+ appended to the select button slot.
A select popover, which is a div element. It is appended to the
+ select's shadow root as the second child, after the select button
+ slot. The select element's '::picker' pseudo-element is the
+ select popover.
A select popover slot, which is a slot element. It is appended to
+ the select popover. It is expected to take all child nodes of the
+ select except for the first child button, which is taken by the
+ select button slot.
Since base appearance is determined by computing style, it isn't
+ possible to swap this DOM structure when switching appearance. Implementations can always include
+ the DOM structure for base appearance when the select is rendered as a
+ drop-down box and then choose to include or exclude it from the layout tree in order
+ to control whether it gets rendered or not.
The select popover is only rendered when it is opted in to base
+ appearance separately from the select element. Otherwise, a native picker is
+ used.
The select popover's implicit anchor element is its associated
+ select element.
When a select element is being rendered with native appearance or
+ primitive appearance, the '::picker' pseudo-element and the
+ '::picker-icon' pseudo-element do not apply.
The '::picker' pseudo-element is not rendered when it has native + appearance or primitive appearance.
+ +The '::checkmark' pseudo-element only applies to option elements
+ which are inside a select element with base appearance whose
+ '::picker' pseudo-element has base appearance.
An optgroup element is expected to be rendered by displaying the element's label attribute.
An option element is expected to be rendered by displaying the element's label, indented under its optgroup element if it
- has one.
An option element is expected to be rendered by displaying the result of
+ collect option text given the option and true, indented under its
+ optgroup element if it has one. If the option is in a
+ select which is being rendered as a drop-down box with base
+ appearance, and the select's select popover is being rendered
+ with base appearance, and the option's label attribute is not set, then the option is
+ expected to render all of its children rather than by displaying its label.
Each sequence of one or more child hr element siblings may be rendered as a single
separator.
The following styles are expected to apply to select elements when they are being
+ rendered as a drop-down box with base appearance:
@namespace "http://www.w3.org/1999/xhtml";
+
+select {
+ text-transform: initial;
+ text-align: initial;
+ text-indent: initial;
+ background-color: transparent;
+ border: 1px solid currentColor;
+ padding-block: 0.25em;
+ padding-inline: 0.5em;
+ min-block-size: calc-size(auto, max(size, 24px, 1lh));
+ min-inline-size: calc-size(auto, max(size, 24px));
+ display: inline-flex;
+ gap: 0.5em;
+ border-radius: 0.5em;
+ user-select: none;
+ box-sizing: border-box;
+ field-sizing: content !important;
+}
+
+select > button:first-child {
+ all: unset;
+ display: contents;
+}
+
+select:enabled:hover,
+select option:enabled:hover {
+ background-color: color-mix(in lab, currentColor 10%, transparent);
+}
+select:enabled:active,
+select option:enabled:active {
+ background-color: color-mix(in lab, currentColor 20%, transparent);
+}
+select:disabled,
+select option:disabled {
+ color: color-mix(in lab, currentColor 50%, transparent);
+}
+
+::picker(select) {
+ box-sizing: border-box;
+ border: 1px solid;
+ padding: 0;
+ color: CanvasText;
+ background-color: Canvas;
+ margin: 0;
+ inset: auto;
+ min-inline-size: anchor-size(self-inline);
+ max-block-size: stretch;
+ overflow: auto;
+ position-area: block-end span-inline-end;
+ position-try-order: most-block-size;
+ position-try-fallbacks:
+ block-start span-inline-end,
+ block-end span-inline-start,
+ block-start span-inline-start;
+}
+
+select option {
+ min-inline-size: 24px;
+ min-block-size: max(24px, 1lh);
+ padding-inline: 0.5em;
+ padding-block-end: 0;
+ display: flex;
+ align-items: center;
+ gap: 0.5em;
+ white-space: nowrap;
+}
+
+select option::checkmark {
+ content: '\2713' / '';
+}
+select option:not(:checked)::checkmark {
+ visibility: hidden;
+}
+
+select::picker-icon {
+ content: counter(fake-counter-name, disclosure-open);
+ display: block;
+ margin-inline-start: auto;
+}
+
+select optgroup {
+ font-weight: bolder;
+}
+
+select optgroup option {
+ font-weight: normal;
+}
+
+select optgroup legend {
+ padding-inline: 0.5em;
+ min-block-size: 1lh;
+}divdl elementsselect element inner content elements;
+ optgroup element inner content elements;
+ option element inner content elements
dldl;
+ select element inner content elements;
+ optgroup element inner content elements;
+ option element inner content elements
+ select element inner content elements*;
+ optgroup element inner content elements*;
+ option element inner content elements*HTMLDivElementhrselect element inner content elementsselect element inner content elementsHTMLHRElementlegendfieldsetfieldsetfieldset;
+ optgroupHTMLLegendElementselect element inner content elements;
+ optgroup element inner content elements
head*;
phrasing*optgroupselectoption;
- script-supporting elementsselect element inner content elementsselect;
+ div*optgroup element inner content elementslegend*disabled;
labeloptionselect element inner content elements;
+ optgroup element inner content elementsselect;
datalist;
- optgroupoptgroup;
+ div*
+ option element inner content elements*disabled;
label;
@@ -143343,9 +143951,8 @@ interface External {
form-associated;
palpableoption;
- optgroup;
- script-supporting elementsselect element inner content elements;
+ button*autocomplete;
disabled;
@@ -143357,6 +143964,16 @@ interface External {
HTMLSelectElementselectedcontentoptionbuttonHTMLSelectedContentElementslotoption element inner content elements*HTMLSpanElementsamp;
script;
select;
+ selectedcontent;
slot;
small;
span;
@@ -144179,6 +144798,37 @@ interface External {
select element inner content elements
+ option;
+ optgroup;
+ hr;
+ script-supporting elements;
+ noscript;
+ div
+ optgroup element inner content elements
+ option;
+ script-supporting elements;
+ noscript;
+ div
+ option element inner content elements
+ div
+ datalist, object,
+ interactive content, or elements with tabindex
+
@@ -146195,6 +146845,10 @@ interface External {
select
HTMLSelectElement : HTMLElement
+ selectedcontent
+ HTMLSelectedContentElement : HTMLElement
+
slot
HTMLSlotElement : HTMLElement
@@ -146888,6 +147542,9 @@ INSERT INTERFACES HERE