Test your knowledge: The <selectedcontent> Element

Question 1 of 12

What is the primary semantic purpose of <selectedcontent>?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A To submit an additional form value B To reflect the selected option content inside the closed select button C To replace the select element D To provide the accessible name of the select

selectedcontent reflects the selected option content; the select remains the form control.

Review this lesson

Question 2 of 12

Where is <selectedcontent> permitted in the customizable-select model?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A Inside any button B As the first child of an option C Inside the first-child button of a select D Directly inside form

Its permitted parent is the button that is the first child of a select.

Review this lesson

Question 3 of 12

What is the authoritative source for the selected value?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A selectedcontent.textContent B The select/option selection model C The button DOM D CSS content

Selection and form value belong to the select and option model.

Review this lesson

Question 4 of 12

What happens when the selected option changes?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A The option is moved into the button B The browser copies the selected option DOM structure into selectedcontent C Only the option label attribute is copied D Nothing happens automatically

The selectedcontent subtree is replaced with a new copy of the selected option DOM structure.

Review this lesson

Question 5 of 12

What does the option label attribute contribute to selectedcontent reflection?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A It is always copied instead of option content B It changes the select name C selectedcontent does not reflect the label attribute as its content source D It disables reflection

The standard distinguishes option label rendering from selectedcontent reflection of option content.

Review this lesson

Question 6 of 12

Which statement is correct about rich option content?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A It becomes the submitted form value B It replaces option.value C It is presentation; the option value remains the submitted data D It disables form submission

Rich content and submitted option value are separate concerns.

Review this lesson

Question 7 of 12

Why should nested buttons not be placed inside the select button?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A They improve keyboard behavior B The select button is inert by default, so nested interactive behavior conflicts with the control model C They are required for accessibility D They change option values

The customizable select button is treated as a single inert surface.

Review this lesson

Question 8 of 12

Why can changing selected option descendants leave selectedcontent stale?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A selectedcontent only updates when the selected option changes B CSS blocks updates C select cannot contain spans D option content is immutable

The browser updates selectedcontent when selectedness switches; arbitrary later source mutations are a separate case.

Review this lesson

Question 9 of 12

What should happen when customizable-select features are unavailable?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A The form must fail B The page should retain a usable classic select experience C The value should move to selectedcontent D JavaScript must emulate every interaction

Custom rendering is progressive enhancement over the native select.

Review this lesson

Question 10 of 12

What is the right accessibility approach?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A Give selectedcontent a combobox role B Use selectedcontent as the label C Keep native select semantics and ensure decorative content is not redundantly announced D Remove the select label

selectedcontent has no widget role; the select remains the accessible control.

Review this lesson

Question 11 of 12

What does HTMLSelectedContentElement add beyond HTMLElement?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A A value property B Selection APIs C No additional author-facing properties or methods D Form submission methods

The interface extends HTMLElement without adding its own properties or methods.

Review this lesson

Question 12 of 12

Which component architecture is most durable?

Return to the lesson section that defines this boundary and reason from the native element model.

Answer options A Store application state in selectedcontent DOM B Use select/option state as source of truth and selectedcontent as reflected presentation C Rebuild the select with divs D Treat CSS as the data model

Native state should remain authoritative; selectedcontent is a projection.

Review this lesson

Test your knowledge: The <selectedcontent> Element