instanceOf HTMLElement returns false due to polyfill

vidhu commented 4 years ago

What's the issue?

HTMLElement is overridden by a polyfill. This causes the instanceOf operator to return false in cases where it should return true

How do we reproduce the issue?

Here is a minimal reproducible example

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="//cdn.ampproject.org/v0.js"></script>

    <script>
      (function() {
        let el = document.getElementById("test");
        console.log(el instanceof HTMLElement);
      })();
    </script>

  </head>
  <body>
    <div id="test"></div>
  </body>
</html>

The console should log out true since <div id="test"></div> is an instance of HTMLElement however it logs out false.

Running example

What browsers are affected?

All browsers?

Which AMP version is affected?

Version 2001071857360

dreamofabear commented 4 years ago

Can you share a sample use case on a valid AMP page? AMP doesn't allow <script> as written above.

jridgewell commented 4 years ago

It's not possible to polyfill HTMLElement and preserve the instanceof check here. Custom elements are required to use Foo extends HTMLElement, which means we must change the value of HTMLElement global. Natively constructed elements will still inherit directly from the intrinsic class, regardless of the global's current value. So div instanceof HTMLElement can't be properly done.

Zielak commented 4 years ago

Will it be safe to assume div instanceof Element would work as a workaround for a future?

jridgewell commented 4 years ago

When we no longer need the polyfill. This requires that both the browser natively support Custom Elements v1, and the project must not compile native classes to ES5. We're actively working on the second, and the first just takes time.

consigliere23 commented 1 year ago

Any solution for this?

ampproject / amphtml