CODEWITHSUNDEEP
javascripthtmlfirefoxweb-componentcustom-element
jlengrand
jlengrand

Reputation: 12827

Too much recursion in Firefox when using custom elements

I am trying to create new custom elements.

I have a very simple html index file : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="dist/webcomponents-lite.js"></script>
    </head>

    <body>

        <h1>WebComponents</h1>
        <hello-world></hello-world>

        <script src="src/components/hello-world.js"></script>
    </body>
</html>

My hello-world component is as follows : 

class HelloWorldElement extends HTMLElement {

    constructor(){
        super()

        this.innerHTML = `<h1>Hello Meetup !</h1>`;
    }    

    connectedCallback(){
        console.log("I'm here!");
    }

    disconnectedCallback(){
        console.log("I'm gone!");
    }

}

    window.customElements.define(
                    'hello-world', 
                     HelloWorldElement);

This code snippet works perfectly fine in Chrome and Safari.

I have added the webcomponents-lite.js import to add support for other browsers.

However when trying to run the code in Firefox I get the following error: 

too much recursion
[Learn More]
webcomponents-lite.js:93:170

I have found very little info on the web as to what can be going on.

I think I am following the recommended path explained in the polyfills page from the web components website.

Any idea what is going on?

Thanks

EDIT:

I am able to get the custom element showing by enabling dom.webcomponents.customelements.enabled and dom.webcomponents.enabled in the firefox config and removing the polyfill, but that's obviously not something desired on production.

Upvotes: 1

Views: 1578

Answers (2)

Supersharp
Supersharp

Reputation: 31219

The error is due to the fact that you modify the inner HTML content of the custom element in its constructor, which is unexpected and therefore should not be done.

Instead, you should do that after, for example in the connectedCallback() method.

Alternately, if you want to define the content in the constructor, you should insert it into a Shadow DOM.

NB: the custom element polyfill is effectively included in webcomponents-lite.js.

Upvotes: 4

jlengrand
jlengrand

Reputation: 12827

Alright, it looks like I was missing another polyfill?

If I also import 

    <script type="text/javascript" src="bower_components/custom-elements/custom-elements.min.js"></script>

before the web-components-lite.js polyfill then I have no issues any more. I found the resource via google documentation

This is weird, as I thought that custom-elements was one of the subparts of the web-components polyfill itself...

Upvotes: 0

Related Questions