The <selectedcontent> Element

Technical Summary

Definition / Categories

Item	Specification summary	Check
Meaning	Shows the currently selected option's contents in the select's first-child button	Keep choices, selection state, and display location distinct
Categories	None	It is not flow, phrasing, or interactive content
Context	Inside the first-child button of a select	The button is the special first-child branch for drop-down selects
Content model	Empty in author markup; the browser clones the selected option's child nodes	Do not hand-write a second copy inside selectedcontent
DOM interface	HTMLSelectedContentElement	An element interface exists, but it adds no dedicated role or display-value IDL attribute

Usage context

In a customizable select, the select retains the selection model and form value, while its first-child button provides the closed-state display. selectedcontent is the place inside that button where the selected option's contents appear. The button and selectedcontent are not independent page-level controls.

<label for="plan">Plan</label>
<select id="plan" name="plan">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <div>
    <option value="basic"><span>Basic</span></option>
    <option value="pro" selected>
      <span>Pro</span> <small>Recommended</small>
    </option>
  </div>
</select>

appearance: base-select is a styling feature in CSS Basic User Interface Module Level 4. Evaluate the HTML content model separately from CSS support, and measure rendering, picker, and interaction in each implemented browser and version.

Copying and updates

The HTML Standard's update steps return immediately when the select has the multiple attribute. Otherwise, each non-disabled descendant selectedcontent uses the first option in the option list whose selectedness is true. If there is no such option, its contents are cleared. Otherwise, the option's child nodes are deep-cloned and replace the current contents.

Trigger	Specification behavior	Measurement note
Initial markup connection	After connection in an eligible select, update from the current selection	Do not conflate parser intermediate states with the connected result
Selection change	Select update notifications update descendant selectedcontent elements	Record user actions separately from selection changes made through DOM APIs
Child mutation in selected option	Each selection update clones the option's child nodes	Do not infer immediate synchronization from the selection algorithm alone
Moving selectedcontent	Recalculate connection conditions and queue an update microtask when eligible	Measure movement, insertion, and removal conditions separately
multiple select	The descendant update algorithm returns early	Distinguish valid customizable-select markup from boundary fixtures in WPT

Boundary with label and value

selectedcontent does not run the option label algorithm or copy the form value. Its copy algorithm reads the selected option's child nodes.

Information	Defined by	Relationship to selectedcontent
Choice label	The option's label attribute or option text	The label attribute's string is not copied into selectedcontent
Display markup	The option's child nodes	Child nodes are cloned for the current selection
Form value	The option's value attribute or option value rules	It is not copied; the select handles form submission
Source option	The option list inside select	Nodes are cloned, not moved, so the choice remains in the list

See the option page for rich option content, label/value resolution, and the text-only content model for options in datalist.

DOM Interface / disabledness

The DOM interface is HTMLSelectedContentElement and defines a constructor. The element has no dedicated content attribute or form-submission API. The specification has an internal boolean disabled state that controls whether an element participates in updates; it is set in conditions such as being inside an option or another selectedcontent element. Do not confuse this internal state with an author-facing disabled attribute or IDL property.

const selectedcontent = document.querySelector('selectedcontent');
const select = selectedcontent.closest('select');
const selectedOption = select.selectedOptions[0];

selectedcontent instanceof HTMLSelectedContentElement;
selectedcontent.innerHTML;
select.value;

selectedcontent.innerHTML reads the display nodes created by the browser. Read select.value for the application or form value; do not use display markup as that value.

Fact / Evidence

Normative claims and implementation observations are recorded separately. WPT runs without a known source revision remain partial, and browser accessibility-tree output is not generalized to platform APIs or assistive-technology speech.

Evidence

1. HTML Standard: The selectedcontent element — definition, interface, disabledness, copying, insertion, connection, movement, and update rules
2. HTML Standard: The select element — customizable-select content model, option list, selection, picker, and form relationships
3. HTML Standard: The option element — option content model, label, value, and selectedness
4. HTML Accessibility API Mappings — platform mappings for HTML elements and attributes; it has no dedicated selectedcontent entry
5. Web Platform Tests: customizable select — selectedcontent selection, mutation, nesting, insertion, and removal cases

Implementation Evidence

Implementation evidence records the environment, test files, results, and unrun scope. The Japanese and English evidence tables are generated from docs/atlas/evidence-registry.json.

Specification review and browser, WPT, and accessibility-tree observations are treated as separate evidence.

Coverage / Open Issues

• ReviewedMeaning, context, DOM interface, option child-node copying, label/value boundary, and multiple-select update boundary
• OpenBehavior across browsers and operating systems, complex option markup, all DOM mutation and movement conditions, and CSS appearance / picker rendering
• OpenPlatform accessibility APIs when HTML-AAM has no dedicated mapping, screen-reader speech and interaction, and the full WPT scope

This page records initial coverage. Its results apply only to the named environments and selected tests; they do not claim complete verification of selectedcontent or every implementation.

Related surface

For a beginner-friendly explanation, see Yugien on selectedcontent. The full selection model and customizable select are covered by select; option markup and label/value behavior by option; and the first-child button's form behavior by button.