customElements 在 google chrome 中不起作用

Question

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

假设这个最小的例子：

<!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>

我希望这会创建一个自定义元素 class MyElement 并将 DOM 中的所有 my-element 元素转换为该 class 的实例添加到自定义元素注册表后，将原来的红色组件变为绿色。在 firefox 中，这正是发生的情况，但在 google chrome 中，它保持红色。控制台指示元素已添加到注册表，但从未调用其构造函数。

我错过了什么吗？这是 chrome 的问题，还是我做错了什么？我怎样才能让它在那里工作？

Answer 1

这里是工作示例

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/

变化：

扩展 HTMLElement 而不是 HTMLDivElement
在js中调用addCustomElement函数确保执行
从 customElements.define

{extends:"div"}

Answer 2

我刚刚再次查看 mdn 发现了这个：

There are two types of custom elements:

Autonomous custom elements are standalone — they don't inherit from standard HTML elements. You use these on a page by literally writing them out as an HTML element. For example <popup-info>, or document.createElement("popup-info").

Customized built-in elements inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the is attribute (or property). For example <p is="word-count">, or document.createElement("p", { is: "word-count" }).

这意味着由于 MyElement 扩展了 HTMLDivElement，正确的语法应该是 <div is="my-element">，而不是 <my-element>。尽管如此，Firefox 似乎接受 <my-element>，但 chrome 不接受。

使用正确的语法，这似乎适用于两种浏览器：

<!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()">
        <div is="my-element" style="display:block;width:100px;height:100px;background:#ff0000"></div>
    </body>
</html>

mdn 上也有一条注释指出 chrome 仅支持自治元素；然而，这似乎不是真的，因为上面的代码片段似乎工作得很好。

customElements 在 google chrome 中不起作用

customElements not working in google chrome

javascript

html

google-chrome

custom-element