Element.js Breaks Site In Firefox With "Custom Elements: `Element#attachShadow` was not patched."



  • I’ve been having a really hard time with Firefox compatibility. I am down to one error now, and one I don’t even understand how it breaks the site on Firefox.

    /**
     * @param {!CustomElementInternals} internals
     */
    export default function(internals) {
      if (Native.Element_attachShadow) {
        Utilities.setPropertyUnchecked(Element.prototype, 'attachShadow',
          /**
           * @this {Element}
           * @param {!{mode: string}} init
           * @return {ShadowRoot}
           */
          function(init) {
            const shadowRoot = Native.Element_attachShadow.call(this, init);
            this.__CE_shadowRoot = shadowRoot;
            return shadowRoot;
          });
      } else {
        console.warn('Custom Elements: `Element#attachShadow` was not patched.');
      }
    

    How do I begin to troubleshoot this one? Totally lost. :/

    It works in everything but Firefox. Grrrrrrrrr.


  • Onsen UI

    @Woody-Deck I don’t think you need to worry about it. Onsen UI does not use Shadow DOM. You can find more info in the Web Components polyfill project.



  • I read that thread, but couldn’t make sense of it or how this possible could break the site.
    Could you look at my live site in Firefox to make sure Onsen is not the responsible issue? From what I see it is breaking it, but I’m probably wrong. I am seeing stars

    I get no other error codes and it works perfectly in Chrome/Safari.

    Edit: I’m getting now some other error that appears after ten seconds, sometimes in firebug. It’s probably this, and you are probably right. It’s sad how far Firefox has fallen. I can’t run it on an 8 core gaming rig with with a single tab without lag. Grrrr.

    It could be a CSR error from one of the scripts loading. Not sure if it could be the Onsen. Firefox really hates mixed content.

    Update: Still absolutely stumped on this. I spoke with the host, who couldn’t help, but said they thought problem originated in onsenui.js.

    Removing onsenui gets rid of one of the errors, but it doesn’t solve it. Firefox inspector is cryptic and only says unknown. I’m looking for a service that helps debugging, but not found anything. What is interesting is I got swiper.js to now function by deleting things. Onsenui also functions, but my script is broken.

    Update 2: Fixed. I need to put event listeners in the document ready part as Firefox loads things differently. Firefox spitting out impossible to debug errors did not help, especially when these errors have been documented as breaking scripts.


Log in to reply