Shoelace: "hydrated" class missing after loading web components

[danielplatt-clx]

Describe the bug
I'm currently using shoelace in version 2.0.0-beta.36.

In older version, e.g. 2.0.0-beta.26, shoelace adds the hydrated class to rendered sl-webcomponents. In 2.0.0-beta.36, this feature is missing.

To Reproduce
Steps to reproduce the behavior:

1. setup a project with shoelace 2.0.0-beta.36
2. insert some shoelace components like sl-select
3. the class="hydrated" is set up to every sl- web compoment after rendering in my browser.

Expected behavior

The hyrated class should be added.

Additional context

Reproduceable in every browser like chrome or firefox.

Is there a specific reason why it was removed?

[trailsnail]

We want to use this class as trigger for "Hey, component is ready, so .hydrated .somecontent {visibility: visible;}

We want to hide textcontent entries from components, which aren't ready to reduce cumulative layout shifts

btw.: Other solutions welcome 😉

[claviska]

The hydrated class was a remnant of Stencil's lazy loader. Shoelace has since migrated to LitElement and removed lazy loading.

As of 2.0.0-beta.29, you can import everything or cherry pick individual components depending on your requirements. In either case, components are immediately available after import so there's no need for a flag.

If you'd like to target a component before importing it, you can use the :defined selector as an alternative.

[danielplatt-clx]

@claviska Thank you for your fast answer :) The defined selector is a nice working way for me.