IE和Firefox上的Webcomponents.js問題

Question

我嘗試制作一個簡單的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 negèrepas lapropriétéou lamé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()發生沖突。

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