时间戳

首页 > 解决方案 > 扩展另一个自定义元素的自定义 HTML 元素

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

问题描述

我有一个自定义 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”是一个有效的自定义元素名称；我知道，但为什么会抛出错误？

这里发生了什么？

标签： htmlcustom-element

解决方案

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

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

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

HTML 标记也是如此：

<pretty-bar></pretty-bar>

推荐阅读