javascript - customElements not working in google chrome

I'm trying to use some custom elements in my website, and in firefox it works great so far. In google chrome however, it just fails silently - the constructor of my custom element is never called, and it also doesn't throw an error.

Suppose this minimal example:

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

Suppose this minimal example:

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

I would expect this to create a custom element class MyElement and convert all my-element-elements in the DOM into instances of that class once added to the custom element registry, turning the originally red ponent green. In firefox, this is exactly what happens, but in google chrome, it stays red. The console indicates that the element was added to the registry, but its constructor was never called.

Am I missing something? Is this a problem with chrome, or am I doing something wrong? And how can I get it to work there?

Share Improve this question asked Dec 18, 2019 at 18:55 peabrainiac 1,07810 silver badges19 bronze badges

Does this answer your question? Custom elements works for Safari but not for Firefox and Chrome – Supersharp Commented Dec 18, 2019 at 22:34
@Supersharp I'm not so sure about that, it deals with the same underlying topic but quite a different issue. Edit: nevermind, I guess that ment was automatically sent when you suggested that question. oops. – peabrainiac Commented Dec 18, 2019 at 22:50

Add a ment |

2 Answers 2

Sorted by: Reset to default 9

I just checked mdn again and found this:

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" }).

This means that since MyElement extends HTMLDivElement, the correct syntax would be <div is="my-element">, and not <my-element>. Firefox seems to accept <my-element> nonetheless, but chrome doesn't.

Using the correct syntax, this seems to work on both browsers:

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

There's also a note on mdn stating that chrome supports autonomous elements only; this doesn't seem to be true however, since the snippet above seems to work just fine.

Working example here

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/so98Lauz/1/

changes:

extend HTMLElement instead of HTMLDivElement
call addCustomElement function in js to be sure that is executed
removed {extends:"div"} from customElements.define

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - customElements not working in google chrome - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)