CustomElements not working in Firefox with about:config properties enabled

Question

CanIuse says that webcomponents v1 is enabled in Firefox v. 61 with the about:config properties dom.webcomponents.customelements.enabled and dom.webcomponents.shadowdom.enabled set to true. And many posts and articles on the web agree with that.

So I have Firefox version 61.0.2 with the aforementioned properties set, and I have a custom element defined as shown below. This renders as expected in Chrome, but in Firefox there is simply nothing rendered and no errors on the console.

<template id="t">
   ...html content
</template>

<script>
    let template = document.currentScript.ownerDocument.querySelector('#t');

      class MyElement extends HTMLElement {

        constructor() {
          super();
          this.shadow = this.attachShadow({mode: 'open'});
          this.shadow.appendChild(template.content.cloneNode(true));
        }
      }
      customElements.define('my-element', MyElement);
</script>

In case it matters, I'm trying to use the custom element in a separate html file to which I've imported the file which contains the code above.

I understand there is a polyfill I can use, but it's not available in the environment where my app will run. I must be missing something, as everything I read online seems to indicate that Firefox should be able to render the element as I've defined it.

Answer 1

I'm trying to use the custom element in a separate html file which I'v imported

I suppose then that you use the HTML Imports feature that is not implemented in Firefox.

Therefore you'll need to use a polyfill for that: the file html-imports.min.js that you can find on the polyfill github's repository.

<script src="html-imports.min.js"></script>
<link rel="import" href="your-custom-element.html">

Alternately (if you don't want to use the HTML Imports), put the code of your custom element in a Javascript file:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
    this.shadow.innerHTML = `...html content`;
  }
}
customElements.define('my-element', MyElement);