Question

我尝试制作一个简单的网络组件。

对于浏览器兼容性，我使用NPM包webcomponents.js（版本0.7.23）。我用Polyserve运行我的小代码。

我的代码在Github上：https://github.com/olofweb/Webcomponents

在Chrome上（第55版） - ＆gt;好的
在IE（版本11）上 - ＆gt; ko
在Firefox（版本50.1）上 - ＆gt; KO

错误：

https://github.com/olofweb/Webcomponents/blob/master/hello-world.html#L31

IE 11（对不起，我没有英文错误）： “L'objetnegèrepaslapropriétéoulaméthode”createShadowRoot“”

Firefox 50.1： “TypeError：this.createShadowRoot不是函数”

Answer 1

在您的主文件index.html中，您正在加载webcomponents-lite.js脚本，该脚本不包含Shadow DOM polyfill。

相反，请尝试加载webcomponents.js。

对于Shadow DOM v1 attachShadow()，您应该使用ShadyDOM polyfill。在这种情况下，您应该使用webcomponents-lite.js，否则会与createShadowRoot() polyfill发生冲突。

<script src="./node_modules/webcomponents.js/webcomponents-lite.js"></script>
<script src="shadydom.min.js"></script>
<script>
if (!Array.from) {
    Array.from = function (object) {
        'use strict';
        return [].slice.call(object);
    };
}
</script>

IE和Firefox上的Webcomponents.js问题

1 个答案: