v150 · dom · forms

Clone into all descendant selectedcontent elements

A handful of refinements to <selectedcontent> — the slot inside a customisable <select> that reflects the chosen option. Multiple selectedcontent elements all stay in sync, and updates are deferred safely during DOM mutations.

concepts

  1. Multiple Mirrors

    One select, three selectedcontent mirrors at different points in the DOM. Pick an option and all three update together — only the first updated before v150.

  2. Mutation Timing

    The deferred-clone half of the change. Move, insert, and remove options while a MutationObserver watches — observers now only fire after each outer DOM step completes, never mid-step.

  3. Multi-Mirror Builder

    A colour-picker select with three <selectedcontent> mirrors labelled by their UI role — toolbar badge, status bar, breadcrumb. Change the selection and all three update simultaneously (Chrome 150 behaviour). A timestamped update log shows each mirror receiving the clone at the same instant, and the HTML markup pattern is shown below.

  4. Sync Inspector

    Observer proof for real <selectedcontent> mirrors. Select an option and inspect the mutation records for each descendant mirror as the selected option clone lands.

  5. Styled Mirrors

    Four mirrors, each styled into a completely different UI component — toolbar chip, IDE status bar, breadcrumb trail, and large preview tile — all fed from the same <selectedcontent> clone. Demonstrates that the cloned data is unstyled raw DOM, ready for each context to apply its own presentation.

  6. Live Form Preview

    A product configurator with three dropdowns. Each select contains real toolbar, breadcrumb, and summary <selectedcontent> mirrors, so the selected option clone feeds multiple UI contexts from the native select subtree.

    Interactive Forms UI patterns

why it shipped

Customisable selects let authors render the selected option anywhere inside the select using <selectedcontent>. Real designs often want to surface that content in more than one place — say, both inside the button and in a sticky summary at the bottom. The pre-v150 behaviour only updated the first selectedcontent in DOM order, which surprised authors and broke real designs. Updating all of them is the obviously-correct semantics. The change also defers selectedcontent mutation until after insertion / removal / move steps complete, plugging a class of security issues where mutation observers could run mid-step.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗