扩展另一个自定义元素的自定义 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'});

可悲的是，Google Chrome吐出错误

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': "fancy-foo" is a valid custom element name

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

这是怎么回事？

Answer 1

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

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

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

HTML 标签也一样：

<pretty-bar></pretty-bar>

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

Custom HTML element extending another custom element

html

custom-element