Webcomponents.js IE 和 Firefox 上的问题

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（抱歉，我没有英文错误）： "L'objet ne gère pas la propriété ou la méthode "createShadowRoot""

火狐 50.1： "TypeError: this.createShadowRoot is not a function"

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>

Webcomponents.js IE 和 Firefox 上的问题

Webcomponents.js issue on IE and Firefox

javascript

web-component

polyfills

shadow-dom