question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:3
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
Conduitrycommented, Aug 20, 2021

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

1reaction
vicky1999commented, Aug 18, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

ReferenceError: <function> is not defined at HTMLElement ...
I am trying to allow a user to input multiple tags and be able to remove them from the array by use of...
Read more >
HTMLElement: input event - Web APIs | MDN
The input event fires when the value of an , , or element has been changed.
Read more >
JavaScript Events - W3Schools
HTML events are "things" that happen to HTML elements. ... HTML allows event handler attributes, with JavaScript code, to be added to HTML...
Read more >
DOM Elements - React
In React, all DOM properties and attributes (including event handlers) should ... In most cases, className should be used to reference classes defined...
Read more >
Event handlers - HTML Standard, Edition for Web Developers
Event handlers, whether registered through the DOM using addEventListener() , by explicit event handler content attributes, by event handler IDL attributes, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found