WebComponents: Firefox custom-element is not showing

1
votes

I am using web components "custom elements" feature and need to support old browsers(Firefox v60), so instead of loading the polyfills via webcomponent-loader.js which loads all the polyfills . lazy loaded custom-elementpolyfill based on feature detection

(function() {
if(!window.customElements){
var ce = document.createElement('script');
ce.type = 'text/javascript';
ce.async = true;
ce.src = 'https://unpkg.com/@webcomponents/[email protected]/custom-elements.min.js';
/**

     * loading "customElement" polyfills wont't fire "WebComponentsReady" event, it will be called when we use
     * "webcomponent-loader.js" but it will load other polyfills("shadow-dom"), so loading the "customElements" polyfill alone
     * based on feature detection and firing "WebComponentsReady" event manually.
     */
  ce.onload = function() {
      document.dispatchEvent(
          new CustomEvent('WebComponentsReady', {bubbles: true}));
  };
  var st = document.getElementsByTagName('script')[0];
  st.parentNode.insertBefore(ce, st);
}
})()

and firedWebComponentsReady event manually when its loaded. Registered the element like below

let registerElement = () => {
 if(!window.customElements.get(“wc-button")){
   window.customElements.define(‘wc-button', WCButton);
 }
};

if(window.customElements){
  registerElement();
 } else {
  document.addEventListener('WebComponentsReady', registerElement);
}

WebComponentsReadygot fired and in the listener callback has been called to define/register the element, but the element isn't getting shown or loaded in the page in firefox60.6.1esr (64-bit)

2
javascriptfirefoxweb-componentcustom-element

2 Answers

2
votes

webcomponents-loader.js does feature detection for you instead of waiting for WebComponentsReady event, you do

<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script>
window.WebComponents.waitFor(() => {
   // do stuff that needs the polyfill
})
</script>

For more information:

0
votes

HTMLElement can be extended only when Custom Elements are implemented (either natively on with a polyfill).

As a consequence you must define the <wc-button> custom element class only after the polyfill is loaded.

In your example:

let registerElement = () => {
    if(!window.customElements.get("wc-button")){
         //define the WCButton class here
         class WCButton extends HTMLElement {
             //...
         }
         window.customElements.define(‘wc-button', WCButton);
    }
};