HTML uploads download order in Internet Explorer

Question

I have a webpage that displays some custom Polymer 1.0 elements. In the section of headmy file index.html, I have the following:

<link rel="import" href="my-elements.html">
<script src="script1.js"></script>
<script src="script2.js"></script>

my-elements.htmlrefers to other HTML files (via HTML import), which in turn refer to javascript files using standard tags script.

In the Chrome browser, everything works as expected. Javascript files inside my-elements.htmlare loaded before script1.jsand script2.js. However, in Internet Explorer (v11) they load in the reverse order. that is, script1.jsand script2.jsdownload first.

In the next article, it indicates the element "HTML Imports block <script>. <script>Does not start until its previous import files are loaded":

https://gist.github.com/omo/9986103

So why is the order different from Internet Explorer?

Note that I am using webcomponents-lite.js as my polyfill web component library. I suspect that the behavior I encounter is due to the fact that Internet Explorer does not have native support for importing HTML, but would like to know how to get around this so that the scripts load in that order.

Answer 1

, IE polyfill, <link> .

HTMLImportsLoaded, webcomponents-lite.js HTML.

<link rel="import" href="my-elements.html">
<script>
  document.addEventListener( "HTMLImportsLoaded", function () {
    var s1 = document.createElement( "script" )
    var s2 = document.createElement( "script" )
    s1.setAttribute( "src", "script1.js" )
    s2.setAttribute( "src", "script2.js" )
    document.head.appendChild( s1 )
    document.head.appendChild( s2 )
  } )
</script>