Polymer 3.0 Polyfils for firefox

0
votes

I am using firefox 52.3.0 and planning to develop using web components(Polymer 3.0). I am looking for polymer 3.0 polyfil that works in firefox.

I tried webcomponents-lite.js (worked partially - did not support es5 polymer)
I tried webcomponents-bundle.js (ddnt workd)
I even added the es5-adapter.js from @webcomponents repositories, they just didnt work for firefox. It worked in Opera and Chrome(which didnt need the polyfill) but never on firefox.

I know youtube is built entirely on polymer and I can access it (even inspect the elements) so well within my mozila firefox, which tells me there is a polyfil that works. I am jut not able to find it.

PS: I would love to be able to use these polymerElements with react-js, I know its possible, but I dont know how yet. can someone please tell me how?

2
polymerweb-component
Why webcomponents-bundle.js didn't work? There are no webcomponents-lite.js polyfill for Polymer 3 btw. And why would you need es5 polyfill for Firefox? Firefox supports ES5 natively. – Binh Bui
firefox appears to support ES6 web components only, not ES5. that why I need a polyflil for that. and yes, webcomponents-bundle.js didnt work for firefox 52, but worked well in Opera. so, Can you please guide me on which polyfills to use? I promise I will keep my trials aside and follow every of the guide that you give – andylamax
Check my answer below. – Binh Bui

2 Answers

1
votes

Okay, that sounds odd. And Opera does not need any polyfill because they have all the standards already shipped natively.

One thing you can try is that make an ES6 web component, and get ES5 web components from Polymer bundling. Check out the official docs: https://www.polymer-project.org/3.0/toolbox/build-for-production#compile

Polymer 3.x and the Polymer Elements are written in ES6 (also known as ES2015). To allow older browsers to render your apps, compile your code to ES5.

When you compile your code to ES5, the Polymer build tools will inject the custom-elements-es5-adapter.js polyfill into your entrypoint so that ES6-capable browsers can still render your ES5 code.

0
votes

@Binh helped me and pointed me to the right direction, which got me to the firefox polyfills as below

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Template Polymer 3.0 App">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="theme-color" content="#fff">
  <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" async></script>

Yes, only webcomponents-loader.js

I hope this helps someone who comes looking