`Uncaught TypeError: Illegal constructor.` when extending HTMLSpanElement

Question

我得到一个基本为空的构造函数的 Uncaught TypeError: Illegal constructor.：

export class Citation extends HTMLSpanElement {
  constructor() {
    super();
  }
}

此中的一条评论声称

I encountered the same error with Web Components but only on Safari (not Firefox). Cause was that I did a class UserAvatar extends HTMLSpanElement (rather than HTMLElement)

这让我尝试了 HTMLElement，这实际上消除了错误。所以现在我想知道。我可以扩展哪些 HTML 元素？为什么我不能扩展 span 元素？有几个类似的问题：Uncaught TypeError: Illegal constructor when extending HTMLButtonElement, How to create new instance of an extended class of custom elements. But they are a bit older and in this answer 据称这应该从 2018 年 10 月开始工作。我使用的是最新的 firefox 浏览器，所以我很困惑......

有人知道怎么回事吗？

Answer 1

有 2 种自定义元素MDN: Using Custom Elements

自主自定义元素：extend HTMLElement
自定义Built-In元素
Polyfill Safari 需要
因为 Apple 不想实现这种类型的元素。
有充分的理由； read the very long debate（回到 2016 年）

一般建议

坚持自主元素，除非你知道自己在做什么。

一个注册管理机构统领一切

（目前）只有一个注册表，因此您的 自定义元素 被注册为 fancy-button;
这意味着您不能混合使用相同元素名称的 2 种类型。

更新

不要将第三个参数用于自治元素（扩展 HTMLElement）

您不能混合设置：

<script>
  class BaseClass extends HTMLElement {
    connectedCallback() {
      console.log("I AM ", this.nodeName);
    }
  }
  customElements.define('el-1', class extends BaseClass {});
  customElements.define('el-2', class extends BaseClass {}, {
    extends: "ul"
  });

</script>

<el-1></el-1>

<!-- doesn't do anything -->
<el-2></el-2>

<!-- throws "TypeError: Illegal constructor." -->
<ul is="el-2"></ul>

`Uncaught TypeError: Illegal constructor.` when extending HTMLSpanElement

`Uncaught TypeError: Illegal constructor.` when extending HTMLSpanElement

javascript

web-component

一般建议

更新