扩展另一个自定义元素？

Question

尝试扩展自定义元素：

 class ABC extends HTMLDivElement { connectedCallback() { console.log('ABC here') } } customElements.define("x-abc", ABC, { extends: 'div' }) class XYZ extends ABC { connectedCallback() { console.log('XYZ here') } } customElements.define("x-xyz", XYZ, { extends: 'x-abc' })

 <div is="x-abc"></div> <div is="x-xyz"></div>

但收到此错误：

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

错误令人困惑，因为它说“有效”，而不是“无效”！

另一方面，FF 说：

  Uncaught DOMException: CustomElementRegistry.define: 'x-xyz' cannot extend a custom element

我想建立自定义元素的层次结构。

Answer 1

这个错误起初可能听起来令人困惑，但实际上它非常清楚。 规范明确定义您只能使用is语法扩展内置函数。 按照目前的设计，使用ABC作为基础 class 绝对不是最聪明的想法（除非您放弃扩展HTMLDivElement以支持HTMLElement ）。

您还没有解释为什么需要扩展div元素，这绝对不是您通常构建组件层次结构的基础。 Safari 甚至不（可能永远不会）支持它。

相反，扩展HTMLElement并省略is -syntax。

 class ABC extends HTMLElement { connectedCallback() { console.log('ABC here') } } customElements.define('x-abc', ABC) class XYZ extends ABC { connectedCallback() { super.connectedCallback(); console.log('XYZ here') } } customElements.define('x-xyz', XYZ)

 <x-abc></x-abc> <x-xyz></x-xyz>

如果出于某种奇怪的原因您需要继续扩展HTMLDivElement （而不是HTMLElement ，这将是正确的方法），这里是 go：

只需将{extends: 'x-abc'}部分替换为{extends: 'div'} 。

您的两个组件都扩展了div （它们的定义标签名称）。

 class ABC extends HTMLDivElement { connectedCallback() { console.log('ABC here') } } customElements.define('x-abc', ABC, { extends: 'div' }) class XYZ extends ABC { connectedCallback() { super.connectedCallback(); console.log('XYZ here') } } customElements.define('x-xyz', XYZ, { extends: 'div' })

 <div is="x-abc"></div> <div is="x-xyz"></div>

Answer 2

实际上，选项名称 extends:"xxx" 令人困惑。 由于扩展的内置元素必须使用该内置元素的标记进行 html 标记（伴随 is 属性），因此此选项不确定直接祖先（“扩展”它）（这是由类定义的-构造函数链），而是定义标签名称，在解析 html/升级元素时使用给定的构造函数（连同整个链）。 严格来说，它确实扩展了该标签的 class，但不是直接扩展。 “扩展”的意思，与 html is="xxxx" 语法更相关。 想想它，因为它会有一些名称，如 basetag、builtintag、markuptag、builtinbase 等。