Javascript 自定义元素在google chrome中不起作用

我正在尝试在我的网站中使用一些自定义元素，到目前为止在firefox中效果很好。然而，在google chrome中，它只是默默地失败了——我的自定义元素的构造函数从未被调用，它也不会抛出错误

假设这个最小的例子：

类MyElement扩展了HtmlLevel{
构造函数（）{
超级（）；
this.style.background=“#00ff00”；
log（“创建的自定义元素！”）；
}
}
函数addCustomElement（）{
define（“MyElement”，MyElement，{extends:“div”}）；
log（“将MyElement添加到自定义元素注册表！”）；
}

此处的工作示例

class MyElement extends HTMLElement  {
   constructor(){
   super();
   this.style.background = "#00ff00";
   console.log("Created custom element!");
   }
}
function addCustomElement(){
   customElements.define("my-element",  MyElement)  
   console.log("Added MyElement to custom element registry!");
}
// add call here, because onload did not work for me
addCustomElement()

变化：

• 扩展HtmleElement而不是HtmlLevel
• 在js中调用

  addCustomElement

  函数以确保已执行
• 从

  customElements.define中删除
  {extends:“div”}

我刚刚再次检查，发现：

有两种类型的自定义元素：

自治自定义元素是独立的-它们不从标准HTML元素继承。您可以通过将它们作为HTML元素逐字写出来在页面上使用它们。例如

，或

document.createElement（“弹出信息”）

自定义内置元素继承自基本HTML元素。要创建其中一个元素，您必须指定它们扩展的元素（如上面的示例所示），并且它们通过写出基本元素来使用，但在is属性（或属性）中指定自定义元素的名称。例如

，或

document.createElement（“p”，{is:“word count”}）

这意味着由于

MyElement

扩展了

htmldevelment

，正确的语法应该是

，而不是

。尽管如此，Firefox似乎接受

，但chrome却不接受

使用正确的语法，这似乎在两种浏览器上都有效：

类MyElement扩展了HtmlLevel{
构造函数（）{
超级（）；
this.style.background=“#00ff00”；
log（“创建的自定义元素！”）；
}
}
函数addCustomElement（）{
define（“MyElement”，MyElement，{extends:“div”}）；
log（“将MyElement添加到自定义元素注册表！”）；
}

是的，将

htmldevelment

更改为

HTMLElement

并删除

，{extends:“div”}

确实为我解决了这个问题。谢谢另外，我刚刚注意到，在浏览器上，它说chrome只支持“自主自定义元素”——我想这就是扩展

htmldevelment

不起作用的原因。你知道为什么它不能与

{extends:“div”}

和

htmldevelment

选项一起工作吗？根据这种语法也被支持，我不知道，我只是试着让它工作，并对照mozilla检查它应该工作，但chrome向我显示了一个错误，当扩展“HtmleElement”以外的内容时，这是否回答了你的问题@Supersharp我对此不太确定，它涉及相同的基本主题，但却是一个完全不同的问题。编辑：没关系，我猜当你提出那个问题时，评论是自动发送的。面向对象。（1）不需要

addCustomElement

函数，可以在加载事件之前（或之后很久）定义元素。（2） Opera和Safari中还不支持自定义内置元素（=扩展），使用

文档创建元素时会出现一个（3）错误。createElement

未在元素上设置

is

属性。。如果您需要它（例如CSS选择器），您必须在

connectedCallback中执行
.setAttribute（“is”，“my element”）
；（4） 注意！您不能使用
is
属性将一个元素更改为其他元素有关扩展IMG元素的优缺点，请参阅：