"Invalid constructor" with custom elements

[pblzd]

I'm trying to write tests for some web components which inherit from HTMLElement (or Element), and am working around the lack of customElements by mocking customElements.define() (with code that simply does nothing).

With that setup I run into this error:

error: TypeError: Illegal constructor.
         throw new TypeError("Illegal constructor.");
                ^
      at new Node (https://deno.land/x/[email protected]/src/dom/node.ts:89:13)
      at new Element (https://deno.land/x/[email protected]/src/dom/element.ts:515:
      at new Category (file:///app/public/javascript/category.js:15:5)

category.js looks like this (with line 15 being the call to super()):

…
export default class Category extends Element {
  name = "";
  color = "";

  constructor({name, color}) {
    super();
    this.className = "category-name";
    …
  }
…

The code that triggers the exception is just new Category({name: "a name", color: "#abcdef"}).

Do you have an idea what's the issue here? Do I need an actual CustomElementRegistry? Or an actual HTMLElement? Or am I doing something wrong?

Thank you for your work and time!

[0kku]

This is by design: if you run the same code in your browser, you'll get the same error. In the browser, you'd create custom elements using the document.createElement() API. However, deno-dom does not have support for custom element registry yet, and therefore the library does not currently provide a way to construct custom elements.

You'll also find that the constructor for your custom element is not a valid custom element constructor, so your code wouldn't work even in a browser.