javascript - IE 11 中的 WebComponents 支持 - PolyFills

Question

我有一个在 chrome 中运行的网络组件。我正试图让它出现在 IE 11 中。

我在主索引页中添加了这一行:

<script type="text/javascript" src="app/shared/headerComponent/webcomponents-lite.js"></script>

我已将文件复制到所述目录。在我重建和部署我的网站后，我在 IE 中看不到 Web 组件，在 Chrome 中它显示正常。

我错过了什么吗？

2017 年 9 月 6 日更新

我现在收到这个错误:

文件:webcomponents-lite.js，行:137，列:460 无法获取未定义或空引用的属性“documentElement”

线路是这样的:

var a=this.ownerDocument;if(a&&a.contains&&a.contains(this)||(a=a.documentElement)&&

因此，看起来 polyfill 正在加载但未正确执行。此外，我在连接和断开连接的回调中放入了一些 console.log，但它们也没有被调用。

Answer 1

我添加了这些 polyfill(s)/库:

<script type="text/javascript" src="app/shared/headerComponent/webcomponents-lite.js"></script>
<script type="text/javascript" src="app/shared/headerComponent/custom-elements.min.js"></script>

此外，位置也会有所不同。我把它们放在 head 标签之后。在 body 无法正常工作之后，需要进行 DOM 操作。

我添加了 custom-elements.min.js，因为我们也使用自定义元素的 v1 规范。

在此之后，Web 组件在 IE 11 中可见。