First alert.toast() produces error

[lbird-mma]

Describe the bug

The Alert component has a built-in .toast() method. I'm using the demo code from the shoelace website.
When called for the first time, it either

1. produces no toast. A quick flash of the text is shown below the button (or end of document)
2. runs into an error. Uncaught TypeError: alert.toast is not a function

On the Shoelace site it all works fine, however isolating it doesn't.

To Reproduce

Steps to reproduce the behavior:

See demo

Demo

Codepen

Browser / OS

• OS: Windows 11
• Browser: [Brave/Chrome/Firefox]
• Browser version: latest

Additional information

[CetinSert]

https://xcodepen.io/lbird-mma/pen/WbeMeZO ↓
This is the error and DOM state after several .toast()s:

[vonpawn]

In case this helps you, I was running into the same issue due to using the autoloading version of shoelace. The solution in #1324 worked for me.

[lbird-mma]

@vonpawn Thanks so much, yes this helps. I was using autoloader and didn't think of that. Just to prevent this issue and some FOUC related problems, I decided to go back to the traditional loader. Also because I use a lot SL components it's worth the initial performance penalty.

[lbird-mma]

@claviska : won't close this just yet, as it might be good to mention this in the documentation example.
Either use traditional loader or use
customElements.whenDefined('sl-alert').then(() => alert.toast());