fix ssr for sl-alert and scrollend-polyfill

[schilchSICKAG]

Hello Shoelace team!

We are currently in the works of creating an SSR compatible version of our own fork of Shoelace, Synergy. It works pretty well, but we stumbled upon two issues, preventing it to work in Angular SSR environments:

1. The <sl-alert> component does automatically create the toast stack when imported, leading to errors in SSR environments because document.createElement is always fired.
2. The scrollend-polyfill directly checks for 'scrollend' in window when it is included. This prevents the use of <sl-tab-group> in SSR environments.

We already patched this in our alert and polyfill implementation, but wanted to mirror this back for everyone that might be interested.

That said, as we have not tested SSR in Vanilla environments, but only in framework based ones (e.g. https://github.com/synergy-design-system/ssr-demos/tree/main/packages/angular gives a good demo with our findings).

The changes are really simple ones and, for <sl-alert>, also have the benefit that the stack is only created when the toast method is called at all.

Hope this may prove helpful for the community, also regarding the discussion in #1641.

We would also loved to have provided this for Webawesome, but as I see, you seem to have completely got rid of <sl-alert> in favor of <wa-callout> which comes without the original toast stack functionality. Just out of curiosity, what where the reasons for this change?

Closes #2358

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shoelace	✅ Ready (Inspect)	Visit Preview	Feb 3, 2025 7:27pm

[claviska]

Thanks for submitting this! Looks great.