Skip to content

Commit

Permalink
Don't observe mutations in <selectedoption>
Browse files Browse the repository at this point in the history
  • Loading branch information
josepharhar committed Oct 28, 2024
1 parent 4cb6f48 commit afd1b34
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion site/src/pages/components/customizableselect.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ The first child `<button>` of a `<select>` will be slotted into the `<select>`'s

The `<selectedoption>` element enables developers to declaratively clone the content of the selected `<option>` element to the button and to style it distinctly from the `<option>`. This use case is shown in the [rendering the option differently in the button](#rendering-the-option-differently-in-the-button) example.

When the `<selectedoption>` element is placed inside of a `<select>`'s `<button>`, then the browser will replace its DOM contents with the result of calling `cloneNode()` on the currently selected `<option>` element. Whenever the user selects a different `<option>` or when there is a DOM mutation inside of the selected `<option>`, the browser will update the contents of `<selectedoption>` by internally calling `cloneNode()` again.
When the `<selectedoption>` element is placed inside of a `<select>`'s `<button>`, then the browser will replace its DOM contents with the result of calling `cloneNode()` on the currently selected `<option>` element. Whenever the user selects a different `<option>`, the browser will update the contents of `<selectedoption>` by internally calling `cloneNode()` again. If the DOM contents of the currently selected `<option>` are modified, then the browser will not re-clone into `<selectedoption>`.

Since the contents of the `<selectedoption>` element are maintained by the browser, authors should not put any HTML/DOM content inside of `<selectedoption>`.

Expand Down Expand Up @@ -690,3 +690,4 @@ option::before {
- [Why `<button type=popover>` (overturned by `selectedoptionelement`)](https://github.com/openui/open-ui/issues/939#issuecomment-1910837275)
- [Why `selectedoptionelement`](https://github.com/openui/open-ui/issues/1063#issuecomment-2195407344)
- [Why require `appearance:base-select` on both `select` and `select::picker(select)`](https://github.com/w3c/csswg-drafts/issues/10440)
- [Why not observe mutations in selected `<option>`](https://github.com/openui/open-ui/issues/825#issuecomment-2436124668)

0 comments on commit afd1b34

Please sign in to comment.