javascript - IE 和 Firefox 上的 Webcomponents.js 问题

Question

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

为了浏览器兼容性，我使用 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(抱歉，我没有英文错误): “对象不属于属性或方法“createShadowRoot””

火狐 50.1: “类型错误: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>