Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[select] Use the new ::behavior selector and clarify that ::part doesn't work #714

Closed
wants to merge 1 commit into from
Closed

[select] Use the new ::behavior selector and clarify that ::part doesn't work #714

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions site/src/pages/components/selectmenu.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,18 +52,18 @@ Selectmenu provides a variety of tools to help with styling, including pseudo-se

### Styling parts of the control

One way to style the control to match your requirements is to use the CSS `::part()` pseudo-element to select the different parts within the control's anatomy that you wish to style.
One way to style the control to match your requirements is to use the CSS `::behavior()` pseudo-element, newly introduced for the selectmenu element, to select the different parts within the control's anatomy that you wish to style.
Copy link
Member

Choose a reason for hiding this comment

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

We should link out to the definition of behavior. Do we have one in CSSWG yet? If not we should probably expound on this.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't know of a CSSWG issue proposing ::behavior yet.
If we remove the "newly introduced for the selectmenu element" part is that good enough to merge this now?
I'm hesitant to open a CSSWG issue proposing this just yet since domenic's general feedback could change how this works. I haven't even opened an HTML issue for selectmenu yet.

Copy link
Author

Choose a reason for hiding this comment

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

This is not in CSSWG yet.

I'm hesitant to open a CSSWG issue proposing this just yet since domenic's general feedback could change how this works. I haven't even opened an HTML issue for selectmenu yet.

I feel the same. Should we create a draft spec of ::behavior somewhere at open-ui?


```html
<style>
.my-select-menu::part(button) {
.my-select-menu::behavior(button) {
color: white;
background-color: #f00;
padding: 5px;
border-radius: 5px;
}

.my-select-menu::part(listbox) {
.my-select-menu::behavior(listbox) {
padding: 10px;
margin-top: 5px;
border: 1px solid red;
Expand All @@ -84,7 +84,9 @@ The above example results in the following style:
alt="The rendering of a selectmenu control with the above HTML and CSS code"
/>

`::part()` can be used to style the `button`, `selected-value`, and `listbox` parts of the control.
`::behavior()` can be used to style the `button`, `selected-value`, and `listbox` parts of the control.

Note that the `::part()` pseudo-element selector only matches elements in the user-agent shadow tree, and hence, fails to match any author-provided part (as in [slotting your own content](#slotting-your-own-content)).
Copy link
Member

Choose a reason for hiding this comment

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

can you please wrap this with a div with a class of .note

Copy link
Member

Choose a reason for hiding this comment

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

Also see my above comment on whether ::behavior is defined somewhere as this should be covered in that definition; not in selectmenu itself.


### `:open` and `:closed` pseudo-selectors

Expand Down