Using CustomStateSet

[yringler]

Now that CustomStateSet is supported by all modern browsers, can it be used in PRs etc?
It does look like a lower level API, so there would probably have to be a preliminary PR to add a higher level utility to make it easier to work with.

It opens up very exciting and theming possabilities, without requiring clumsy reflected properties etc.

In particular, I'm dealing now with tabs, and this would be an excellent way to support things like

sl-tab::part(scroll-button) {
  opacity: 0;
  transition: opacity linear 1s;
}

sl-tab::part(scroll-button):state(scrolled-to-end) {
  visibility: visible;
  opacity: 1;
}

Best practices would have to be established and documented -

1. naming conventions
2. if to define on the component, part, or both
3. when to define
4. updating the css docs
5. Documentation per component, after custom properties and parts. Maybe a custom JSdoc tag until there's official support? IDK

[claviska]

We're using custom states in Web Awesome (albeit with a [data-state] fallback for unsupportive browsers). However, let's hold off on using it in Shoelace since it requires ElementInternals.states which no Shoelace components use (they were built before that API existed).

[yringler]

Ok. One more reason to be excited about web awesome!