Javascript IE和Firefox上的Webcomponents.js问题

我尝试制作一个简单的web组件

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

我的代码在Github上：

• 在Chrome（版本55）->正常
• 关于IE（第11版）->ko
• 在Firefox（版本50.1）->ko上

错误：

IE 11（对不起，我没有英文错误）： “这是一种“创造阴影根”的方法”

Firefox 50.1：

---

“TypeError:this.createShadowRoot不是一个函数”

在主文件

index.html

中，您正在加载

webcomponents lite.js

脚本，该脚本不包含阴影DOM多边形填充

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

相反，请尝试加载

webcomponents.js

---

对于shadowdomv1

attachShadow（）

，应该使用。在这种情况下，您应该使用

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>

如果（！Array.from）{
Array.from=函数（对象）{
"严格使用",；
返回[].slice.call（对象）；
};
}

在您的主文件

index.html

中，您正在加载

webcomponents lite.js

脚本，该脚本不包括阴影DOM 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>

相反，请尝试加载

webcomponents.js

---

对于shadowdomv1

attachShadow（）

，应该使用。在这种情况下，您应该使用

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>

如果（！Array.from）{
Array.from=函数（对象）{
"严格使用",；
返回[].slice.call（对象）；
};
}

已折旧，并且可能已在这些版本中删除。firefox/ie中甚至没有启用它们，因为它仍然是一项实验性技术。@FrankerZ以及使用什么来代替它？对不起，我刚刚看到你的链接，我发现我必须使用

attachShadow（）

。但我在IE和FF（Github更新）中也有同样的错误。已折旧，并且可能已在这些版本中删除。firefox/ie中甚至没有启用它们，因为它仍然是一项实验性技术。@FrankerZ以及使用什么来代替它？对不起，我刚刚看到你的链接，我发现我必须使用

attachShadow（）

。但是我在IE和FF（Github更新）中也有同样的错误。使用

createShadowRoot

，您的解决方案可以工作。但我不喜欢它，因为这个函数被贬低了。我必须用新函数（

attachShadow

）找到一个解决方案，@Olof然后使用ShadyDOM polyfillok，我尝试使用ShadyDOM，现在它在FF上工作，但在IE11中总是不起作用（ShadyDOM.min.js上的错误，ligne 9，colonne 3419，L'objet ne gère pas la propriétéou méthode“from”）。。。Github updatedit的，因为Array.from在IE11上不存在。也可以使用polyfill。请参阅我的更新答案。使用

createShadowRoot

，您的解决方案可以正常工作。但我不喜欢它，因为这个函数被贬低了。我必须用新函数（

attachShadow

）找到一个解决方案，@Olof然后使用ShadyDOM polyfillok，我尝试使用ShadyDOM，现在它在FF上工作，但在IE11中总是不起作用（ShadyDOM.min.js上的错误，ligne 9，colonne 3419，L'objet ne gère pas la propriétéou méthode“from”）。。。Github updatedit的，因为Array.from在IE11上不存在。也可以使用polyfill。请参阅我的最新答案。