CODEWITHSUNDEEP
javascriptweb-componentshadow-dompolyfills
Olof
Olof

Reputation: 544

Webcomponents.js issue on IE and Firefox

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

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"

Upvotes: 0

Views: 2704

Answers (1)

Supersharp
Supersharp

Reputation: 31181

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>

Upvotes: 2

Related Questions