Menu
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?
761
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.logis 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
