pea*_*iac 2 html javascript google-chrome custom-element
我正在尝试在我的网站中使用一些自定义元素，并且在 Firefox 中到目前为止效果很好。然而，在谷歌浏览器中，它只是默默地失败 - 我的自定义元素的构造函数从未被调用，并且它也不会抛出错误。
假设这个最小的例子：
<!DOCTYPE html>
<html>
<head>
<script>
class MyElement extends HTMLDivElement {
constructor(){
super();
this.style.background = "#00ff00";
console.log("Created custom element!");
}
}
function addCustomElement(){
customElements.define("my-element",MyElement,{extends:"div"});
console.log("Added MyElement to custom element registry!");
}
</script>
</head>
<body onload="addCustomElement()">
<my-element style="display:block;width:100px;height:100px;background:#ff0000"></my-element>
</body>
</html>我希望这会创建一个自定义元素类，并在添加到自定义元素注册表后将 DOM 中的MyElement所有元素转换为该类的实例，从而将最初的红色组件变为绿色。my-element在 Firefox 中，这正是发生的情况，但在 google chrome 中，它保持红色。控制台指示该元素已添加到注册表中，但从未调用其构造函数。
我错过了什么吗？这是chrome的问题，还是我做错了什么？我怎样才能让它在那里工作？
工作示例在这里
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()
https://jsfiddle.net/so98Lauz/1/
变化：
addCustomElementjs中的函数以确保执行{extends:"div"}已经从...删除customElements.define 我刚刚又查了一下mdn，发现了这个：
\n\n\n自定义元素有两种类型：
\n\n
\n- 自主自定义元素是独立的\xe2\x80\x94，它们不继承自标准 HTML 元素。您可以通过将它们逐字写为 HTML 元素来在页面上使用它们。例如
\n<popup-info>，或document.createElement("popup-info")。- 自定义的内置元素继承自基本的 HTML 元素。要创建其中之一，您必须指定它们扩展哪个元素（如上面的示例所示），并且通过写出基本元素但在 is 属性（或属性）中指定自定义元素的名称来使用它们。例如
\n<p is="word-count">，或document.createElement("p", { is: "word-count" })。
这意味着，由于MyElementextends HTMLDivElement，正确的语法将是<div is="my-element">, 而不是<my-element>。Firefox 似乎仍然接受<my-element>，但 chrome 不接受。
使用正确的语法，这似乎适用于两种浏览器：
\n<!DOCTYPE html>\n<html>\n <head>\n <script>\n class MyElement extends HTMLDivElement {\n constructor(){\n super();\n this.style.background = "#00ff00";\n console.log("Created custom element!");\n }\n }\n function addCustomElement(){\n customElements.define("my-element",MyElement,{extends:"div"});\n console.log("Added MyElement to custom element registry!");\n }\n </script>\n </head>\n <body onload="addCustomElement()">\n <div is="my-element" style="display:block;width:100px;height:100px;background:#ff0000"></div>\n </body>\n</html>mdn上还有一条注释指出 chrome 仅支持自主元素；然而，这似乎并非如此，因为上面的代码片段似乎工作得很好。
\n| 归档时间： |
|
| 查看次数： |
4085 次 |
| 最近记录： |