[selectmenu] Add CSS selector to consistently select selectmenu parts

[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.

[gregwhitworth]

This is a great question and one I'll add to the agenda to discuss this week. I do agree that if this blocks the potential for a default UA stylesheet then we need a solution.

[xiaochengh]

Maybe it will also be useful for library authors, when they want to build a component based on a selectmenu and want to set a base style to it?

[css-meeting-bot]

The Open UI Community Group just discussed [selectmenu] Add CSS selector to consistently select selectmenu parts.

The full IRC log of that discussion

<gregwhitworth> Topic: [selectmenu] Add CSS selector to consistently select selectmenu parts
<gregwhitworth> github: https://github.com//issues/645
<hdv> xiaocheng: the issue is, we don't have a way to consistently select parts of the selectmenu, regardless of where it actually is
<hdv> xiaocheng: the part:: selector exists but that doesn't work for all cases
<hdv> xiaocheng: the more complicated case is if the selectmenu is part of a bigger component and the listbox is slotted in from an outer tree scope, we don't have a way to select it
<masonf> q?
<masonf> q+
<hdv> xiaocheng: so I am proposing we introduce a new selector that selects in all cases. This should be very useful for UA stylesheets, and also for library authors
<gregwhitworth> ack masonf
<hdv> [ technical issue ]
<masonf> I'm text only now.
<masonf> No, Joey and Xiaocheng can speak for me.
<masonf> 1-
<masonf> FYI, I've tried two different browsers, Chrome and Safari.
<masonf> This is clearly a Jitsi bug though - my audio got through to Joey with no issues.
<gregwhitworth> https://meet.google.com/bhk-agxm-qgq
<gregwhitworth>
<hdv> masonf: clarifying question: is the proposal 'make it so no matter if the listbox in lightdom, shadow dom, slotted element, the ::part selector would still work' ?
<hdv> xiaocheng: yes
<gregwhitworth> q+
<hdv> masonf: that makes sense, that makes it easy from a developer's point of view too, it's the same CSS however you do it
<hdv> gregwhitworth: web compat question: 'behavior' is interesting… but this is still a part… should we maybe see if we can expand part and make it so that it behaves as what you're looking for?
<hdv> masonf: the difference is that… as the part pseudo selector works now, it won't work if the part comes from the light DOM
<hdv> xiaocheng: yes and I think there's no way it can work, as it is defined as something in the Shadow DOM
<hdv> gregwhitworth: ok … I am supportive of that pseudo selector… I can foresee there are naming resolution, because 'behavior' is quite specific… could be a light DOM specific selector for instance
<hdv> gregwhitworth: I can foresee CSSWG may have a request like that
<hdv> gregwhitworth: do you want to put forward a proposed resolution?
<hdv> xiaocheng: should I propose a name too? how about selectmenupart?
<hdv> gregwhitworth: I doubt that will fly
<hdv> masonf: I like behavior
<gregwhitworth> Proposed Resolution: We recommend to add a new CSS pseudo selector of ::behavior which will allow selection within a shadow or light DOM
<masonf> +1
<gregwhitworth> Resolved: We recommend to add a new CSS pseudo selector of ::behavior which will allow selection within a shadow or light DOM

[josepharhar]

css-meeting-bot didn't pull the important part out of the details:

Resolved: We recommend to add a new CSS pseudo selector of ::behavior which will allow selection within a shadow or light DOM

[josepharhar]

crbug: https://bugs.chromium.org/p/chromium/issues/detail?id=1412843

[github-actions]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[lukewarlow]

This is addressed by https://open-ui.org/components/selectlist/#styling-parts-of-the-control