What's the strategy for asserting DOM elements as custom elements in TypeScript?

[andyjessop]

I'm trying to access a custom element and call an API method on it, but I get TS errors because toast does not exist on the element according to TS:

document.getElementById(alert.id)?.toast(); // Property 'toast' does not exist on type 'HTMLElement'.
(document.getElementById(alert.id) as ShoelaceElement)?.toast(); // Property 'toast' does not exist on type 'ShoelaceElement'.

[xdev1]

What about the following?

 (document.getElementById(alert.id) as SlAlert)?.toast();

or

 document.querySelector<SlAlert>(`#${alert.id}`)?.toast();

How shall getElementById (or ShoelaceComponent) know about the concrete element type without anyone declaring it explicitly?

[andyjessop]

You're absolutely right - tbh, I didn't know about the SlAlert type. Thanks!