Autoloader question

[ourson66]

So I decided I was going to switch to using the autoloader and using the CDN, because, you know, efficiency. Right away I started having a problem with my alerts. I love shoelace's alert system and specifically the toast stacking, auto-dismissing, especially now that the new "countdown" display is there for auto-dismissing alerts! I used the suggested pattern in the documentation for creating sl-alerts programmatically, so I can have a "stdalert(..." call (being an old Mac-head forever) which, like the sample code, creates the sl-alert, appends it to the body, and then calls "alert.toast" to add it to the stack. Right away, I'm getting browser errors telling me that alert.toast isn't a method name, and it occurs to me: using the auto-loader means that when I first create the sl-alert, it's just an unknown as far as the browser is concerned, and the autoloader has to pull the right files down and initialize stuff to get the custom component ready, so there will be a wait, until the sl-alert component is ready to go, and until that time, none of the methods are in fact callable, am I thinking about that right? It matters much less when the sl-xxx components are in the html and the autoloader can kick in early enough so that by the time the page is rendered and my javascript is run, everything is ready, but in my case, I don't have any "sl-alert(s)" on the page at all until I manually create it.

If that's right, then do you have any best practices for dealing with that? Should I:

1. Plop an empty "sl-alert" at the top of my page, to give the autoloader time to get the component ready so it and it's "toast()" method are available when I need them?
2. Use the "updateComplete" or some other function to force the first "stdalert" call to wait until the alert is ready before calling "toast()"?

Anything else? I could go back go using a local, hosted shoelace, but, you know, efficiency...! :).

[claviska]

A quick way to guarantee an element exists before accessing properties or methods is:

customElements.whenDefined('sl-alert').then(() => {
  // The component has been fully registered
});

With top-level await, you can also do something like this early on in your app:

await customElements.whenDefined('sl-alert');

Or, for multiple components:

await Promise.all([
  customElements.whenDefined('sl-alert'),
  customElements.whenDefined('sl-another-tag'),
  // ...
]);