Webcomponents.js issue on IE and Firefox

Question

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"

Answer 1

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>