CODEWITHSUNDEEP
cross-browserpolymerfrontendcompatibilityweb-component
Ma All
Ma All

Reputation: 53

Make Polymer 3.0 element backwards compatible with IE11 and Firefox 56?

I have a component in polymer 3.0. Currently only Chrome Version 67.0.3396.99 supports is out of the box. And Firefox 61.0.1 gives error TypeError: window.customElements is undefined .

Edge gives the following error:

SCRIPT5007: SCRIPT5007: Unable to get property 'polyfillWrapFlushCallback' of undefined or null reference

settings.js (15,14). SCRIPT5131: SCRIPT5131: Function is not a constructor.

Polymer docs are not clear and don't have step by step guide that works without issues. Can some one provide tried and tested steps to make Polymer 3.0 components work in latest browser and also in older browsers like IE11.

Upvotes: 4

Views: 1239

Answers (3)

Jin Wei
Jin Wei

Reputation: 1

Note that you have to load synchronously your webcomponents-loader.js, so make sure don't use async in your (in chrome it works well with async, but ie doesn't). At first time I encountered the same issue, and my script is below:

<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" async></script>

Upvotes: 0

Sa&#238;&#238;d Wede
Sa&#238;&#238;d Wede

Reputation: 31

Install polyfills:

npm install @webcomponents/webcomponentsjs

Then load webcomponents-loader.js to check and load any polyfills your browser needs. In your index.html, before any reference to web components add this:

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

Hope this will help someone!

Upvotes: 2

Ma All
Ma All

Reputation: 53

I was able to get it running by adding webcomponents-loader.js like: 

 <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
                <script src="./components/subscriber-modal.js" type="module"></script>

But now I need to find a way to convert ES6 WebComponent to ES5 so as to use 

<script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>

to run the transpiled component. But just using babel gives require not defined error. So will try to use browserify.

Upvotes: 0

Related Questions