Skip to content

Comments

Add content covering the limitations of <selectedcontent>#39411

Merged
hamishwillee merged 5 commits intomdn:mainfrom
philipwalton:patch-1
May 30, 2025
Merged

Add content covering the limitations of <selectedcontent>#39411
hamishwillee merged 5 commits intomdn:mainfrom
philipwalton:patch-1

Conversation

@philipwalton
Copy link
Contributor

Description

This PR updates the <selectedcontent> reference document to:

  1. Include more details about the limitations of cloning, and
  2. Add a note emphasizing that sites built using JavaScript frameworks may prefer not to use <selectedcontent> and instead rely on the framework's existing UI synchronization feature.

Motivation

After seeing this Angular bug related to <selectedcontent> as well as testing the behavior of <selectedcontent> in several other frameworks and discovering issues, I believe it's important to update the MDN docs to clarify both the use cases for <selectedcontent> as well as its limitations. This should help ensure developers aren't confused by issues they run into when trying to use this new element.

FYI, I've discussed this recommendation with folks on the Chrome team working on the customizable <select> feature, and they're comfortable with this recommendation.

Additional details

Related issues and pull requests

@philipwalton philipwalton requested a review from a team as a code owner May 5, 2025 17:53
@philipwalton philipwalton requested review from estelle and removed request for a team May 5, 2025 17:53
@github-actions github-actions bot added Content:HTML Hypertext Markup Language docs size/s [PR only] 6-50 LoC changed labels May 5, 2025
@github-actions
Copy link
Contributor

github-actions bot commented May 9, 2025

Preview URLs

(comment last updated: 2025-05-27 08:49:34)

Copy link
Member

@estelle estelle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not even sure should be included yet on MDN. This review is based on us keeping it for now

@estelle estelle requested a review from hamishwillee May 13, 2025 15:40
@estelle
Copy link
Member

estelle commented May 19, 2025

I don't think your suggestion addresses the core issue, which is that dynamic modifications to the selected value do not get automatically cloned to the <selectedcontent> element.

Is this a specification bug or an implementation bug?

@philipwalton
Copy link
Contributor Author

Is this a specification bug or an implementation bug?

I think this was a specification choice (not bug) to avoid over-cloning. See my other comment here for more context.

Comment on lines +44 to +45
> [!WARNING]
> In particular, this may cause issues with sites that use popular front-end JavaScript frameworks where {{htmlelement("option")}} elements are dynamically updated after creation, as these updates will not be cloned to the `<selectedcontent>` element.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have merged my suggestion of @chrisdavidmills compromise solution - FYI @estelle @philipwalton

Like all compromises, I suspect none of us will be completely happy. But is this "good enough" for all of you?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works for me.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works for me too, thanks all! (And sorry for the delayed reply.)

@hamishwillee
Copy link
Collaborator

OK. Good enough for me. Thanks all.

@hamishwillee hamishwillee merged commit fe7daa1 into mdn:main May 30, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Content:HTML Hypertext Markup Language docs size/s [PR only] 6-50 LoC changed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants