Additional docs for Tab active state styling

[qbunt]

I’m brand new to Shoelace and had an incredibly hard time figuring out the right selector for the active state of Tab components. Coming from other component libraries, the syntax for doing so was foreign, especially when using Shoelace inside a SvelteKit app. Had it not been for this issue, there’s nothing in the docs that point the the right way to do this. In my case, it was:

:global(sl-tab[active]::part(base))
/* :global() is purely sveltekit */

Looking at the css parts examples in the Getting Started was misguiding, as the button active state doesn’t reflect how the Tab active styling has to work and seems broken. I’ve tried to find a good place for this to go in the docs and can’t find one, but it seems like it should go somewhere.

The rest of the docs are so good, curious if anyone else had issues with styling states or had an alternative approach that isn’t so verbose.

[claviska]

Sorry to hear that. That selector is particularly confusing because it includes three things, one which is non-standard and one which is newer.

• The :global() selector is a Svelte thing
• The ::part() selector is a newer CSS syntax that many people struggle with (it's also partly on us authors to describe component anatomies better)
• The [active] attribute selector, which is how we're targeting state (at least until ElementInternals.states is available)

That said, I hear you and we're working to improve how we document customizations. Some of it will require embracing the ::part() selector which, in my experience, has been the hardest thing for folks to grasp. We have some ideas though.

In the meantime, free to dive into the shadow root in the inspector to see what the structure looks like. I've found that this helps some folks.

[qbunt]

hey Cory 👋, thanks for the response. All makes sense now, [active] attribute was weird to me because it’s treated either like a pseudoselector like you show in the parts docs for buttons, or as a distinct prop in other libs. The ::part()s that are exposed are really great actually, made it easy to handle everything else.

Is there a good spot for the attribute state syntax somewhere in the docs? Happy to push a PR.

[claviska]

The properties table shows attributes as well. In most cases, the attribute is the same as the property but multi-word properties go from someName to some-name (when this happens, the attribute will be shown under the property name in the docs).

You can tell if an attribute reflects (i.e. gets updated to match the property) in the Reflects column.