Webcomponents-lite.min.js loads out of order

Question

Using Firefox which requires webcomponents-lite.min.js.

In my index.html I have webcomponents-lite.min.js that executes and loads before my routing.js script:

  <script>
      // Setup Polymer options
      window.Polymer = {
        dom: 'shadow',
        lazyRegister: true,
      };

      // Load webcomponentsjs polyfill if browser does not support native
      // Web Components
      (function() {
        'use strict';

        var onload = function() {
          // For native Imports, manually fire WebComponentsReady so user code
          // can use the same code path for native and polyfill'd imports.
          if (!window.HTMLImports) {
            document.dispatchEvent(
              new CustomEvent('WebComponentsReady', {bubbles: true})
            );
          }
        };

        var webComponentsSupported = (
          'registerElement' in document
          && 'import' in document.createElement('link')
          && 'content' in document.createElement('template')
        );

        if (!webComponentsSupported) {
          var script = document.createElement('script');
          script.async = false;
          script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
          script.onload = onload;
          document.head.appendChild(script);
        } else {
          onload();
        }
      })();
    </script>

    <link rel="import" href="/elements/elements.html">
    <link rel="import" href="/elements/my-app.html">

    <style>
      body {
        margin: 0;
        font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #fafafa;
      }
    </style>
  </head>
  <body>
    <!-- build:remove -->
    <span id="browser-sync-binding"></span>
    <!-- endbuild -->
    <iron-meta key="HOST" value="http://80.40.3.2"></iron-meta>
    <my-app></my-app>
    <!-- Built with love using Polymer Starter Kit -->
   </body>
  <script src="/js/routing.js"></script>

However, looking at the network tab in firefox routing.js loads right beforewebcomponents-lite.min.js. This is causing a error since I need webcomponents-lite.min.js to load before routing.js.

Since there is no aysnc behavior, the order should be guaranteed, right? Why is this happening and how can I make this order work without over-coding with more event listeners and if then statements?

score 0 · Answer 1 · answered Feb 27 '17 at 08:48

Don't import your routing.js as .js file.

First, you should switch to routing.html and convert your routing file to polymer element. I am using page.js and it was like 5 minute job. And trust me, it helped a lot when my project was getting bigger. For imports you can use Polymer's function importHref.

I had similar problem so i solved it by importing routing file inside another function which called onload function when all imports were ready.

In your case:

  <script>
      // Setup Polymer options
      window.Polymer = {
        dom: 'shadow',
        lazyRegister: true,
      };

      // Load webcomponentsjs polyfill if browser does not support native
      // Web Components
      (function() {
        'use strict';

        var onload = function() {
          // For native Imports, manually fire WebComponentsReady so user code
          // can use the same code path for native and polyfill'd imports.
          if (!window.HTMLImports) {
            document.dispatchEvent(
              new CustomEvent('WebComponentsReady', {bubbles: true})
            );
          }
        };

        var importLinks = function() {
          Polymer.Base.importHref("/elements/routing.html", function() { onload() });
        }

        var webComponentsSupported = (
          'registerElement' in document
          && 'import' in document.createElement('link')
          && 'content' in document.createElement('template')
        );

        if (!webComponentsSupported) {
          var script = document.createElement('script');
          script.async = false;
          script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
          script.onload = importLinks;
          document.head.appendChild(script);
        } else {
          onload();
        }
      })();
    </script>

    <link rel="import" href="/bower_components/polymer/polymer.html">
    <link rel="import" href="/elements/elements.html">
    <link rel="import" href="/elements/my-app.html">
    <style>
      body {
        margin: 0;
        font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #fafafa;
      }
    </style>
  </head>
  <body>
    <!-- build:remove -->
    <span id="browser-sync-binding"></span>
    <!-- endbuild -->
    <iron-meta key="HOST" value="http://80.40.3.2"></iron-meta>
    <my-app></my-app>
    <!-- Built with love using Polymer Starter Kit -->
   </body>

in this case, don't forget to import polymer.html

I have it a little bit more complicated, because i am loading 5 files that are needed to be loaded before script is started. So if you'll get some error with this, tell me and i can update my answer

Webcomponents-lite.min.js loads out of order

1 Answers1