haunted components are not instanceof HTMLElement

[vlukashov]

Custom Elements returned by the component function do not pass the instanceof HTMLElement check. This is not what I would expect from a DOM element, and that might break other code (see vaadin/router#372).

Example (see full in CodeSandbox):

customElements.define("my-app", component(App));
const app = document.createElement("my-app");
console.log(`app instanceof HTMLElement: ${app instanceof HTMLElement}`); // false

See a more detailed investigation in vaadin/router#372 (comment)

Expected behavior:
All components created through haunted's component() function do pass the instanceof HTMLElement check in all browsers.

[matthewp]

Very bizarre, could this be because of the Proxy I guess? I'll look into it.

[matthewp]

Fix is coming in #128 . I would think this behavior would be the default with Proxys. Surprising. Learned something new today!

[matthewp]

Published in https://github.com/matthewp/haunted/releases/tag/v4.5.3 . Thanks again for the heads up!

[vlukashov]

Thanks for a quick fix! I find this behavior in ES Proxies strange and confusing as well.

But thanks to this issue I've learned something about Proxies, and also about the haunted library. It looks cool! Keep up the good work!

[sepbot]

Not sure if related to this issue or a different issue, but in the type declarations Context.Provider and Context.Consumer implement Element but customElements.define wants HTMLElement.

const defaultValue = '';
const Context = createContext(defaultValue);

// this does not work
customElements.define('provider', Context.Provider);

// this works
customElements.define('provider', Context.Provider as ComponentConstructor<{} & string & HTMLElement>);

The compile error

<file name redacted> - error TS2345: Argument of type 'Constructor<{}>' is not assignable to parameter of type 'CustomElementConstructor'.
  Type 'Element' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 106 more.

10 customElements.define('provider', Context.Provider);
                                     ~~~~~~~~~~~~~~~~

I tried to play around with tsconfig.json, but couldn't get it to compile. Here are my compiler options

{
    "target": "ESNext",
    "lib": [
      "DOM",
      "ESNext"
    ],
    "allowJs": false,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "strict": true,
    "esModuleInterop": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "resolveJsonModule": true
  }

Using latest Typescript at the time of writing 3.8.3.