Styling vanilla HTML elements with a class instead of custom element?

[JensRoland]

IIRC Shoelace used to work on non-WC elements too? It was using a class-based syntax on plain HTML elements.

Something like:

<input type="checkbox" class="sl-checkbox"/>

Instead of (or in addition to):

<sl-checkbox>Checkbox</sl-checkbox>

I understand the reasoning for using LitElement / standard Web Components for interactive elements, but this comes at the price of hydration, and you seem to be using them even for elements which are inherently static or which already exist in vanilla HTML. As a bit of a web performance enthusiast, it causes me physical pain that my checkboxes (or buttons, callouts, drawers, breadcrumbs...) should have to wait for a JS bundle to download and a customElements.define() call to be invoked before they can even be rendered.

This is not a question of improving the SSR story with DSD, but a question of allowing devs to generate their breadcrumb markup with vanilla HTML and add a Shoelace/WebAwesome styling class to get the best of both worlds: the best possible performance with the Shoelace/WA design system applied.

Maybe the class based styles are still available, I just couldn't find them referenced in the docs....?

[claviska]

The first iteration of Shoelace was a light Bootstrap replacement that worked like this. The new version is web component-based for a number of reasons, but we're also adding support for light DOM styles (in Shoelace 3.0, aka Web Awesome) for things like inputs and other common elements in the near future.

At the moment, there are no class-based components in Shoelace 2.

[JensRoland]

Thanks for the reply -- looking forward to Web Awesome!!!