How to get custom elements working in Firefox?

As of June 2018, Firefox support for Custom Elements can be enabled with the following steps

1. Type in the search bar about:config.
2. search for dom.webcomponents.shadowdom.enabled click to enable.
3. serch for dom.webcomponents.customelements.enabled click to enable.

Hope this helps someone out there.

UPDATE: Now, since Firefox 63, Custom Elements are supported in Firefox by default.

Firefox has not yet shipped Custom Elements v1, which is the latest standard and is what specifies customElements.define() as the way to define an element (as opposed to v0 which used document.registerElement() and is what is available with the dom.webcomponents.enabled flag in Firefox).

Chrome is currently the only browser that supports Custom Elements v1 natively, but all other major browsers are supportive of it.

Firefox has an open bug for Custom Elements v1 support.

In the meantime, your best bet is to use the Custom Elements v1 Polyfill for browsers that don't support it. You can feature-detect Custom Elements v1 support with 'customElements' in window.