selectedcontent

When to Use

• Inside a customizable select to show a custom trigger with rich content
• When options contain images, icons, or descriptions that should be mirrored in the closed state
• When you need CSS control over how the selected value displays in the button

Requirements: Only works when the browser supports appearance: base-select (Chrome 135+). In non-supporting browsers, the select falls back to its standard rendering.

How It Works

The browser automatically clones the currently selected <option>'s DOM into the <selectedcontent> element using cloneNode(). It updates every time the selection changes via a change event.

Required Structure

The nesting must follow this exact pattern:

• <button> must be the first child of <select>
• <selectedcontent> must be inside that <button>
• All <option> elements come after the button
• Both opening and closing tags are mandatory

Examples

Basic

A plain select with a custom trigger. The selected option text is cloned into the button automatically.

Rich Content with Flags

Options with emoji flags and descriptions. The .detail text is hidden in the closed trigger via CSS to keep it compact.

Styling

Since <selectedcontent> contains a clone of the selected option's DOM, you can target child elements to control what is visible in the closed state versus the open dropdown.

VB applies these styles automatically inside @supports (appearance: base-select):

• selectedcontent gets display: flex with align-items: center and gap
• selectedcontent .detail is hidden by default
• The parent button fills the select width as a flex container

Attributes

<selectedcontent> accepts only global HTML attributes (class, id, style, data-*, etc.). There are no element-specific attributes.

Accessibility

• Inert by default: The <button> inside <select> is inert, so <selectedcontent> and its children cannot be focused or interacted with independently
• Implicit ARIA role: none — screen readers treat it as presentation
• Cloned content: Decorative elements (icons, flags) in options should use aria-hidden="true" since they are cloned into the trigger as well
• Keyboard navigation: Fully handled by the parent <select> — no additional keyboard handling needed

Caveats

• Dynamic content: The browser only updates <selectedcontent> on change events. If you modify the currently selected option's content dynamically (e.g., via a framework), the clone won't refresh automatically
• Implicit button: If you omit <button> and <selectedcontent>, the browser creates an implicit button that cannot be targeted with CSS type selectors
• Experimental: This element is not yet Baseline — check browser support before relying on it in production

Browser Support

Requires appearance: base-select support (Chrome 135+). VB gates all related styles behind @supports, so non-supporting browsers fall back gracefully to the standard select rendering.

Related

• select — Parent element; see the Customizable Select section for the full base-select guide
• option — Options whose content gets cloned into selectedcontent
• optgroup — Group related options with styled section headers
• button — The required parent of selectedcontent inside a customizable select
• combo-box — Alternative for filterable dropdowns with full browser support