'HTMLElement' is not defined when used in markup event handler

[techniq]

Describe the bug

If HTMLElement is used in an event handler, for example:

<button on:click={e => { if (e.target instanceof HTMLElement) { } }}>Click me</button>

It produces the following unexpected warning:

'HTMLElement' is not defined. Consider adding a <script> block with 'export let HTMLElement' to declare a prop (5:49)

If you use Element in the handler, no warning is produced:

<button on:click={e => { if (e.target instanceof Element) { } }}>Click me</button>

or if you pull the handler into a function within <script>

<script>
  function onClick() {
    if (e.target instanceof HTMLElement) {

    }
  }
</script>

<button on:click={onClick}>Click me</button>

Reproduction

REPL

Logs

No response

System Info

See REPL

Severity

annoyance

[himanshu007-creator]

Hi, I would like to work on this issue, can someone guide me further on what needs to be done?
Thanks

[dummdidumm]

You need to enhance the list of known globals, see this PR for inspiration: #5601

[techniq]

Might be good to go ahead and add SVGElement when HTMLElement is added.

I'm guessing we're not wanting this list to be exhaustive as otherwise this list would be quite large, even for just HTML/SVG elements...

FYI, my use case is mostly to scope e.target to make typescript happy.

[vicky1999]

Hi, I would like to work on this issue. can I try it?

[Conduitry]

HTMLElement and SVGElement are both now marked as known globals in 3.42.2. Thanks @vicky1999!

[vicky1999]

Thanks @Conduitry

[Yakumwamba]

Hi everyone, I have a question regarding HTMLElement. How can I set it as a global variable.

Thanks.

[elamje]

I'm experiencing the same issue with HTMLCanvasElement now @Conduitry. I can put up a PR in a few minutes.