active-base part for tabs

[arackaf]

What issue are you having?

I've like to change the cursor of tab headers which are active

Describe the solution you'd like

Tab headers already have a part of base, but it turns out you cannot chain class selectors onto part selectors, so

::part(base).tab.tab--active

does nothing.

w3c/csswg-drafts#3431

BUT you can have more than one part on an element. Would it be possible to get something like active-base be added to the tab header which is currently active? That would allow users to target it, without also targeting non-active tabs.

So basically, whatever code is toggling the .tab--active class, would also toggle a new active-base part.

Describe alternatives you've considered

I'd like to just select off of css classes you already have, but that's not possible. For good reasons, admittedly. Those css classes are an implementation detail.

[bunesk]

I guess using sl-tab[active]::part(base) instead should already work.

[arackaf]

@Buni48

Oof - this was painful. Never mind - sorry to waste anyone's time. This is obviously the right way to do this.

[qbunt]

@bunesk found this because I was having issues with the same and this:

I guess using sl-tab[active]::part(base) instead should already work.

no longer works. Anyone have any ideas how I can target only the active state? I've tried just about everything I can throw at it.

[bunesk]

@qbunt I tried it again with the current shoelace version and it seems to work fine. See here:
https://codepen.io/bunesk/pen/eYXQgWg

[qbunt]

@bunesk I thought this wasn't working because of usage inside tab-group, but it is working fine, my issue was a misplaced custom property. Thanks, this helped a ton! 🍻.

It's probably worth mentioning this syntax in the docs, I'm a newcomer to Shoelace and it was almost impossible to find if it wasn't for this issue, I'll put together a PR