使用 webcomponenetsjs 的 HTMLImports 以意外的执行顺序加载导入 - firefox

Question

我是 webcomponenetsjs 的新手，我一直在尝试使用 HTMLImports 将另一个 HTML 导入我的 index.html。由于 chrome 支持 HTML 导入，所以我没有问题。但是当我尝试使用 firefox 时，HTML 导入无法按预期工作。问题是它加载了所有 HTML 元素，加载了所有脚本，然后只加载了 |link rel="import"|开始执行导入。为了更清楚地说明，以下是触发警报的顺序：

1.after vendor
2。导入前
3. 在 vendor.js
4.alert 内提醒 test.html。

默认情况下，html 导入的执行类似于 vendor.js
2 中的

1.alert。在供应商
之后 3. 在 import.js
4.alert 之前 test.html。

当然，它在 chrome 中的顺序相同。对我所缺少的任何帮助将不胜感激。

<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>

Answer 1

这是因为 Firefox 使用了 HTMLImports.js polyfill ，因此 <link> 调用是异步的。

对于在 IE 或 Edge 中也出现的此问题的解决方案：

使用 webcomponenetsjs 的 HTMLImports 以意外的执行顺序加载导入 - firefox

HTMLImports using webcomponenetsjs loads the imports in unexpected order of execution - firefox

javascript

html

web-component

html-imports