Order of javascript execution when loading html import

Question

This http://webcomponents.org/polyfills/html-imports/ says following:

Under native imports, <script> tags in the main document block the loading of imports.

why then this:

<html>
<head>

  <script>
    console.log('index');
  </script>

  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="some-elt.html">

</head>
<body>
</body>
</html>

and some-elt.html:

<html>
<head>
  <script>
    console.log('import');
  </script>
</head>
<html>

produces in chrome (native imports):

import
index

and in fireforx (polyfill):

index
import

?

It looks like <script> tags are blocked while imports are being loaded.

Is there also some way to ensure js execution before loading any imports?

There are some info on deferring here: http://www.html5rocks.com/en/tutorials/webcomponents/imports/ — mplungjan, Jan 18 '16 at 15:14
don't think I understood it all, but, at least they write there 'The first — user656449, Jan 18 '16 at 15:46
The expected order is found with my Chrome: `index`, then `import`. Are you sure or code. Can you provide a live example? — Supersharp, Jan 19 '16 at 09:22
The examples are kindly provided by Abhinav and when loading from codepan they work for me as expected too. But when loading locally i'm getting import executed before index again, see my movie https://www.dropbox.com/s/or9m8yj3dup6az0/import.mkv?dl=0 — user656449, Jan 19 '16 at 09:49
In Chrome (native imports), I get "index" then "import" as well....http://jsbin.com/jumunu/edit?html,console,output — ebidel, Jan 21 '16 at 16:56
ok, pls clone https://github.com/bushuyev/test_test, npm install, bower install, gulp serve. What do you see? — user656449, Jan 21 '16 at 17:59

score 1 · Answer 1 · edited May 23 '17 at 11:46

I have created a quick pen here with markup you supplied.
It seems to be producing identical and correct output(index then import)for me in both FF and chrome.

But it is equally possible that you might be seeing something different in your console. Culprit here is not how the way script element is parsed,but rather console APIs. It is a non standard feature and might be returning different results for you as explained here

console.log is not standardized, so the behavior is rather undefined, and can be changed easily from release to release of the developer tools

To answer your question, script tag by design is blocking therefore any script which you put before your link rel="import" will be executed before browser encounters import tag.

Here is another pen(http://codepen.io/vishwaabhinav/pen/bEYwaK) to prove this(Also available below), where I am creating and appending divs to body in both imported and main document. It also works as expected i.e. index node is appended to body before import node.

<html>
<head>

  <script>
    var node = document.createElement('div');
    node.innerHTML = 'Index';
    document.body.appendChild(node);
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.20/webcomponents-lite.js"></script>

  <link rel="import" href="http://codepen.io/vishwaabhinav/pen/XXzjZW.html">

</head>
<body>
  
</body>
</html>

Thank you for helping! But I'm afraid it's not console, see this:https://www.dropbox.com/s/or9m8yj3dup6az0/import.mkv?dl=0. Actually I've spot it when trying to init a variable to be used by polymer's behaviours and found that they're invoked before the script in the top of the index page. Btw, which chrome version are you using? Mine is 47.0.2526.111, seems to be latest. — user656449, Jan 18 '16 at 20:42
But the codepans you created work as expected - Index, then Import. — user656449, Jan 18 '16 at 20:45

user656449 · Answer 2 · 2016-01-21T19:29:36.203

sorry everybody, it appears to be someting wrong with build scripts. The resulting html output is as following:

<!DOCTYPE html><html><head>
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.20/webcomponents-lite.js"></script>-->
  <link rel="import" href="some-elt.html">

</head>
<body>

<script src="index.js"></script></body></html>

https://github.com/PolymerElements/polymer-starter-kit/issues/669

Order of javascript execution when loading html import

2 Answers2