Javascript 你能'；定制&x27；非内置元素？

在的MDN文档中，他们详细介绍了自定义内置元素的示例：

customElements.define('expanding-list', ExpandingList, { extends: "ul" });

允许此用法：

<ul is="expanding-list">

  ...

</ul>

但是，系统会提示我一个错误，说明：

Uncaught DomeException:未能对“CustomElementRegistry”执行“define”：“custom element”是有效的自定义元素名称

尝试运行以下操作时：

customElements.define('special-custom-element', SpecialCustomElement, { extends: 'custom-element' });

---

这是我做错了什么，还是这种行为仅限于内置元素？我发现除了我链接到的页面上的内容之外，很难找到任何关于这种行为的信息，因此我希望能从更了解规格的人那里得到一些建议。

你不能按照你想要的方式来做，因为：

可以创建两种类型的自定义图元：

自治自定义元素：独立元素；它们不会从内置HTML元素继承

自定义内置元素：这些元素继承并扩展内置HTML元素

用于扩展

内置元素

您必须走

自主自定义元素

路线

这里有一个想法：

//为元素创建一个类
类MyElement扩展了HtmleElement{
构造函数（文本）{
//始终在构造函数中首先调用超级
超级（）；
//创建阴影根
var shadow=this.attachShadow({
模式：“打开”
});
//创建跨度
var wrapper=document.createElement（'span'）；
wrapper.textContent=！！text？text:'foo'；
shadow.appendChild（包装器）；
}
}
类MyElement2扩展了MyElement{
构造函数（）{
//始终在构造函数中首先调用超级
超级（“酒吧”）；
}
}
//定义新元素
自定义元素。定义（'my-element'，MyElement）；
定义（'my-element2'，MyElement2）

您也可以这样做
类SpecialCustomElement扩展了CustomElement
{
...
}
define（'special-custom-element'，SpecialCustomElement，{extends:'ul'}）

并且可以用它作为

…此外，我假设他们将其称为“定制内置”而不仅仅是“元素”这一事实已经是这个问题的一种答案，但我认为无论如何都值得澄清！只能自定义内置元素。使用自定义元素，您可以扩展现有类以定义新的自治自定义元素。使用继承之外的另一种方法是创建具有不同行为的混合。我认为JavaScript没有为它提供语言构造，但您可以通过Object.assign轻松实现。@Akrion自定义元素可以附加一个阴影根，因此我不认为这是造成这种限制的原因。不幸的是，这种限制确实存在，因为要创建无数不同的元素来生成一种略有变化的东西似乎有点烦人。我更新了答案。我认为现在更有意义了。还为
自主定制元素添加了一个示例
routeA建议，该QA需要更好的可见性/搜索。大多数应用程序开发人员都可以找到或推断这些信息，但在开始了解自定义元素时，这是非常有用的。谷歌搜索“javascript一个自定义元素可以扩展另一个自定义元素吗？”这是一个备选方案。我尝试过的其他大多数搜索都将这篇文章完全隐藏了起来。看来你的答案可能被切断了。
customElements.define('special-custom-element', SpecialCustomElement, { extends: 'custom-element' });

customElements.define('word-count2', WordCount2, {extends: 'p'});