I am a newbie to webcomponenetsjs and I have been trying to use HTMLImports to import another HTML into my index.html. Since chrome supports HTML imports, I dont have a problem with it. But when I try the same with firefox, the HTML imports doesn't work as expected. The problem is that it loads all of the HTML elements, loads all the script and then only the |link rel="import"| starts to execute the imports. To make it more clear, following is the order of alerts fired:
1.after vendor
2. before import
3. alert inside vendor.js
4.alert inside test.html.
By default, the execution of html imports would be like
1.alert inside vendor.js
2. after vendor
3. before import.js
4.alert inside test.html.
Of course, it works of the same order in chrome. Any help on what I am missing would be much appreciated.
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="icon" type="image/ico" href="/images/favicon.ico"/>
<script src="lib/webcomponentsjs/HTMLImports.js"></script>
<link rel="import" href="js_imports/vendorjs.html">
<script>alert("after vendor");</script>
<b>
</head>
<body class="side-nav-collapsed">
<script>alert("before import");</script>
<link rel="import" href="test.html">
</body>
</html>
It's because Firefox makes use of the HTMLImports.js polyfill , the <link> calls are therefore asynchronous.
For a solution to this issue that is also exhibited in IE or Edge: HTML imports load order in Internet Explorer