扩展另一个自定义元素的自定义 HTML 元素

Question

我有一个自定义 HTML 标签<fancy-foo>，我想扩展它的功能。一些<fancy-foo> 元素将使用pretty-bar 自定义元素进行扩展，这样我就可以在我的HTML 中将它们用作

<fancy-foo is="pretty-bar">
    <!-- content -->
</fancy-foo>

所以，我定义类FancyFoo 和PrettyBar，定义fancy-foo 元素并使用pretty-bar 扩展它，如下所示：

class FancyFoo extends HTMLElement {
  constructor() {
    super();
  }
}

class PrettyBar extends FancyFoo {
  constructor() {
    super();
  }
}

window.customElements.define('fancy-foo', FancyFoo);
window.customElements.define('pretty-bar', PrettyBar, {extends: 'fancy-foo'});

遗憾的是，谷歌浏览器会吐出错误

未捕获的 DOMException：无法在“CustomElementRegistry”上执行“定义”：“fancy-foo”是有效的自定义元素名称

这是一个奇怪的错误。奇怪的是，它说“fancy-foo”是一个有效的自定义元素名称；我知道，但是为什么会抛出错误呢？

这是怎么回事？

Answer 1

您不能以这种方式扩展自定义元素（使用{extends: '...'}）。您只能扩展 内置（=标准）HTML 元素。

如果您想将PrettyBar 设计为FancyFoo 的扩展，您需要将其定义为自治 自定义元素：

class PrettyBar extends FancyFoo {...}
window.customElements.define('pretty-bar', PrettyBar)

HTML 标记也是如此：

<pretty-bar></pretty-bar>