'createTHead' called on an object that does not implement interface HTMLTableElement

Question

I am trying to create a custom Web Component that extends the HTMLTableElement class. The code is relatively simple:

class DataTable extends HTMLTableElement {
    constructor() {
        super();
        this.data = JSON.parse(decodeURIComponent(this.getAttribute(data)));
        const head = this.createTHead();
    }
}

customElements.define('data-table', DataTable, {extends:'table'});

The error comes when I try to call createTHead(). According to documentation, this is a function of HTMLTableElement (which my class extends) and returns an HTMLTableSectionElement object. However, I get an error as stated in the title: createTHead called on an object that does not implement interface HTMLTableElement

I am expecting the HTMLTableSectionElement to be created, instead I get the error. I have tried to remove the options from the define call, and I get an "Illegal Constructor" error.

Reproducible: https://jsfiddle.net/nw3rsjtv/

connexo · Answer

When extending built-in elements, you don't use it with your own tag name.

That is why your current code is giving you

Uncaught TypeError: Illegal constructor: autonomous custom elements must extend HTMLElement

Instead, you provide your registered component name in an is-attribute:

Change

to

Open this in a browser: https://codepen.io/connexo/pen/OJZRbmO

class DataTable extends HTMLTableElement {
  constructor() {
    super();

    this.data = JSON.parse(decodeURIComponent(this.getAttribute("data")));
    if (!Array.isArray(this.data)) {
      console.error("data attribute expects an array of objects.");
    }

    const head = this.createTHead();
    for (let k of Object.keys(this.data[0])) {
      console.log(k);
    }
  }
}

customElements.define("data-table", DataTable, { extends: "table" });

'createTHead' called on an object that does not implement interface HTMLTableElement

1 Answers