Couldn't access styling of selected option.

[NilsJacobsen]

Describe the bug

I use the sl-select with sl-option. I export the part base of option, to have access to the styling, but I can only style the normal background color and hover color. Of course there is no way to style the selected state, because I can't use further selectors after I used the part api.

This gives me the weird behaviour of overriding the select styles.

Is there a workaround or an other way of doing this?

Thanks, folks :)

[claviska]

This is something we're looking to use custom states for in Web Awesome. For now, you can target the selected option with this:

sl-option[aria-selected="true"] {
  /* your styles here */
}

Does that help in the meantime?

[NilsJacobsen]

Does this also work together with the part api?

my-component::part(option__base)[aria-selected="true"] {
   /* your styles here */
}

Or is that not possible?

[KonnorRogers]

You're close. You want this:

sl-option[aria-selected="true"]::part(base) {
}

https://codepen.io/paramagicdev/pen/JjVvQyN?editors=1000

[NilsJacobsen]

Thanks @KonnorRogers gonna try it.

[felixhaeberle]

Hey @KonnorRogers & @claviska – I'm working with @NilsJacobsen, and we have a more complex use case.

We have a multiple-deep nested sl-option component inside of a lit component, let's call it custom-component – which is rendered in the application. We exposed the sl-option via the Parts API as option, and tried to style it like this:

custom-component[aria-selected="true"]::part(option) {
 /* code */
}

Unfortunately, this is not working. Also, directly styling the sl-option is not applicable in our case, as this component is only exposed via the Parts API of custom-component.

Do I miss a way to do this? I want to style the selected state of a nested shoelace component and potentially its hover state, but the API does not seem to allow me to do that.

Appreciate your help here! 🙏