Skip to content

[selectmenu] Add CSS selector to consistently select selectmenu parts #645

@xiaochengh

Description

@xiaochengh

There's currently no way to select a <selectmenu> part, especially if it's provided externally.

For example, if we want to select the listbox part:

  • selectmenu::part(listbox) only works if we are using the listbox in the UA shadow DOM
  • selectmenu [behavior=listbox] should work for most cases when the listbox is author-provided
  • However, there doesn't seem to be a way if, e.g., the selectmenu is in a shadow DOM, and the listbox is passed through from an outer tree scope in a way similar to [selectmenu] Accept "option" elements through multiple slots #565

While this doesn't seem to be a big issue from the author's perspective (since the author should always know how to select the part they provided), it blocks the browser from adding a proper UA style sheet to position the listbox (as in this Chromium patch).

Should we introduce new CSS pseudo element selectors that can select the parts, regardless of where they are (whether in UA shadow DOM or not)? For example, selectmenu::behavior(listbox).

This may be of interest for developers as well.

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs editsThis is ready for edits to be madeneeds-triageselectThese are issues that relate to the select component

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions