Search code examples
internet-explorerfirefoxweb-componentpolyfillshtml-imports

Web Components, HTML Imports polyfills not working in Firefox, IE

I am trying to get Web Components plus HTML Imports to work in Firefox and IE.

I followed the instructions as per the Web Components GitHub repo, installed the files via npm, and included it towards the head of my document.

I have a custom script that is called in the body of the document.

In firefox, the polyfill is loaded dynamically (synchronously) but transforms the script tag in the body from:

<script type="module" src="./src/scripts/init.js"></script>

to

<script src="/components/requirejs/require.js"></script>
<script>require(["./src/scripts/init.js"]);</script>

and I get the following error: ReferenceError: require is not defined.

I also tried following this StackOverflow answer and downloaded the polyfills separately:

(side note: is it advisable to copy/paste the raw code from a repo file? I don't know another way of doing this. I also find it very confusing actually locating the proper file as sometimes the file is located in the root folder, other times in 'src'. Am I missing something?)

I sequence the files in head like so:

<!-- <script src="src/scripts/helper/web-components-polyfill.js"></script> -->
  <script type="text/javascript" src="src/scripts/helper/html-imports-polyfill.js"></script>
  <script type="text/javascript" src="src/scripts/helper/custom-element-polyfill.js"></script>

Note: I comment out the "general" web components polyfill as I'm trying to follow the advice of the reference question.

In Firefox and IE, I get the same error: require is not defined. I get this extra goodness in Firefox: Firefox hell

I also tried using feature detection to load the polyfills as per WebComponents.org:

    <script type="text/javascript">
     (function() {
         if ('registerElement' in document
            && 'import' in document.createElement('link')
            && 'content' in document.createElement('template')) {
            // platform is good!
         } else {
            // polyfill the platform!
            console.log('loading the polyfills');
            var e = document.createElement('script');
            e.type = "text/javascript";
            e.src = './src/scripts/helper/html-imports-polyfill.js';
            document.head.appendChild(e);
            var f = document.createElement('script');
            f.src = './src/scripts/helper/custom-elements-polyfill.js';
            document.head.appendChild(f);
         }
      })();
   </script>

Again, I get a similar set of errors: More Firefox hellfire

The script that launches the app, init.js, which I call after the polyfills are "loaded", is set up to import HTML fragments and append them to the document. Here is the function I use for doing that:

   /**
     * Dynamically imports HTML into the Main file
     *
     * @param  {String} path The path to the document to import
     * @return {[type]}     [description]
     */
    function _importHTML(path) {
        console.log('importHTML called', path);

        let link = document.createElement('link');
        link.rel = 'import';
        link.href = path;

        link.onload = (e) => {
            // console.log('Successfully loaded', e.target.href);
        }

        link.onerror = (e) => {
            console.log('Error loading', e.target.href);
        }

        document.head.appendChild(link);

    }

It goes without saying, but everything works fine in Chrome.

Please help! :D

Solution

  • To make Custom Elements v1 work with Firefox and Edge, you just have to load the webcomponents-bundle.js file from the Web Components polyfill repository. 

    <script src="/your_path/webcomponents-bundle.js"></script>

    To make HTML Imports work with Firefox, IE and Edge, you just have to load the html-imports.min.js file from HTML Imports polyfill repository.

    <script src="/your_path/html-imports.min.js"></script>

    To get the polyfills you can, on github, either :

    • download a file directly (right-click on the link then save the file),

    • copy/paste the raw content,

    • use the green button [Clone of Download] to clone the repository with GIT or download the repository as a ZIP file.

    Using a polyfill with Internet Explorer to create a Custom Element v1 is more complicated because classes don't exist in Internet Explorer and cannot be fully polyfilled themselves.

    However, it is possible to create Custom Elements v0 in Internet Explorer with a polyfill, but it's not recommended.

    If you want to use Custom Elements then forget IE :-)