SlAlert doesn't wait for countdownElement to be defined

[camgaertner]

Describe the bug

When using countdown and duration attributes on an SlAlert, the component doesn't wait for countdownElement to be defined (i.e doesn't wait for first update/render), before attempting to use it. I'm not experienced with web components or shoelace, but I think this is a bug. If it's user error, feel free to close. Thanks

I believe it could be fixed like this in alert.component.ts, I can open a PR if this seems correct:

@watch('duration')
async handleDurationChange() {
+    await this.updateComplete;
     this.restartAutoHide();
   }

Alternatively, it may make more sense to put this await in handleDurationChange.

To Reproduce

Steps to reproduce the behavior:

1. Use the codepen below
2. Click show alert
3. Open web console to see the stack trace. Note codepen console may not show it.

handleCountdownChange https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/chunks/chunk.BSPH4GYQ.js:105
    restartAutoHide https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/chunks/chunk.BSPH4GYQ.js:73
    handleDurationChange https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/chunks/chunk.BSPH4GYQ.js:138
    update https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/chunks/chunk.JMZM2TDT.js:21
    update https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/chunks/chunk.JMZM2TDT.js:14
    performUpdate https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/chunks/chunk.OOP2EFQH.js:520
    scheduleUpdate https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/chunks/chunk.OOP2EFQH.js:501
    _$ET https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/chunks/chunk.OOP2EFQH.js:497

Demo

https://codepen.io/cam194871/pen/emNJyGb

Screenshots

N/A

Browser / OS

• OS: Fedora Linux 42
• Browser: Firefox
• Browser version: 138.0.4

Additional information

N/A

[43081j]

Inside restartAutoHide I think we should basically do this:

const countdownElement = whatever; 
if (!countdownElement) {
  await this.updateComplete;
}

So the observers can stay simple