在未实现接口 HTMLTableElement 的对象上调用 \'createTHhead\'答案

【问题标题】：'createTHead' called on an object that does not implement interface HTMLTableElement在未实现接口 HTMLTableElement 的对象上调用 \'createTHhead\'
【发布时间】：2022-09-13 14:28:07
【问题描述】：

我正在尝试创建一个扩展 HTMLTableElement 类的自定义 Web Component。代码比较简单：

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'});

当我尝试调用createTHead() 时出现错误。根据文档，这是HTMLTableElement（我的类扩展）的一个函数，并返回一个HTMLTableSectionElement 对象。但是，我收到标题中所述的错误：createTHead called on an object that does not implement interface HTMLTableElement

我期待创建HTMLTableSectionElement，但我得到了错误。我试图从define 调用中删除选项，但出现“非法构造函数”错误。

可重现：https://jsfiddle.net/nw3rsjtv/

【问题讨论】：

仅供参考，Apple 自 2016 年以来就表示他们永远不会实施这些定制的内置元素.所以自治元素（扩展 HTMLElement）是 Safari 浏览器支持的全部。当您将 DOM 创建移动到 connectedCallback 时，您的错误可能已修复参见图表：andyogo.github.io/custom-element-reactions-diagram
@Danny'365CSI'Engelman 不，他们只是没有使用is="data-table"。
@connexo，所以你说 Safari做支持定制的内置元素只是没有is？
@Danny'365CSI'Engelman 不，它用一个小的 polyfill 支持它们。我的消息是回复当您将 DOM 创建移动到 connectedCallback 时，您的错误可能已修复

标签： javascript web-component custom-element

【解决方案1】：

扩展内置元素时，不要将其与您自己的标签名称一起使用。

这就是为什么您当前的代码给您的原因

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

相反，您在 is-attribute 中提供您注册的组件名称：

改变

<data-table data="..."></data-table>

至

<table is="data-table" data="..."></table>

在浏览器中打开它：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" });

<!-- Polyfill for browsers that do not support the full web component spec -->
<script src="https://cdn.jsdelivr.net/npm/@ungap/custom-elements@1.1.0/min.js"></script>

<table is="data-table" data="%5B%7B%22header1%22:1,%22header2%22:2%7D%5D"></table>

【讨论】：