IE 和 Firefox 上的 Webcomponents.js 问题 [英] Webcomponents.js issue on IE and Firefox

问题描述

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

为了浏览器兼容性，我使用 NPM 包 webcomponents.js(版本 0.7.23).我使用 Polyserve 运行我的小代码.

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

• 在 Chrome(版本 55)上 -> 好的
• 在 IE(版本 11)上 -> ko
• 在 Firefox(版本 50.1)上 -> ko

错误:

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

IE 11(抱歉，我没有英文错误):"L'objet ne gère pas la propriété ou la méthode "createShadowRoot""

火狐 50.1:类型错误:this.createShadowRoot 不是函数"

解决方案

在您的主文件 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><脚本>如果 (!Array.from) {Array.from = 函数(对象){'使用严格';返回 [].slice.call(object);};}

I try to make a simple web component.

For browser compatibility, I use the NPM package webcomponents.js (version 0.7.23). I run my little code with Polyserve.

My code is on Github: https://github.com/olofweb/Webcomponents

• On Chrome (version 55) -> ok
• On IE (version 11) -> ko
• On Firefox (version 50.1) -> ko

Error:

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

IE 11 (sorry, I don't have the english error) : "L'objet ne gère pas la propriété ou la méthode "createShadowRoot""

Firefox 50.1 : "TypeError: this.createShadowRoot is not a function"

解决方案

In your main file index.html you are loading the webcomponents-lite.js script, which doesn't include the Shadow DOM polyfill.

Instead, try to load webcomponents.js.

---

For Shadow DOM v1 attachShadow(), you should use instead the ShadyDOM polyfill. In this case you should use webcomponents-lite.js otherwise there will be a conflict with 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 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！