Why polyfill? Simply put, we use web standards. Web standards dont go out of fashion. If you build to open web standards, your code will be supported for a longer period of time.
Our code is written in ES6, in due course we will adopt ES7, adopted by all major browsers. As such we have gaps in standards for older browsers and the style we write, these are not always back ported. Polyfills backport these standards.
In time, as browsers are dropped or auto upgraded, standards adopted, polyfills cease to load and run, we use the native methods. Polyfilled code gets faster as browsers age as they are dropped for native functionality. Most code gets slower with time, its a fact of development. Polyfilled systems can counter this somewhat with plolyfills being dropped in favour of native support.
Some polyfills are loaded in your documents, others can be loaded as imports, being ES6 modules. Either way, the use of polyfills gives us tomorrows standards today.
A polyfill from the webcomponents team, bringing custom elements to all browsers.
A polyfill from the webcomponents team, backporting shadowDOM styling support.
A polyfill for missing Object.values / Object.entries, we use object methods in the Custom Web Component library so we have to ensure these functions are available in older browsers.
Promises are not present in older browsers, in some older browsers they are there but still do not work properly. This helps us to replace and fill in this functionality with a single polyfill.
Want to use a new method, class or support older hardware. Feel free to add your own polyfills. Our recommendation would be to use ES6 compatible versions of these, if this i snot possible, maybe you could write your own. Failing this, you can always embed them into your HTML page directly.
<!DOCTYPE html> <html> <head> <title>Boom!</title> <!-- Polyfill --> <script src="/node_modules/promise-polyfill/dist/polyfill.min.js"></script> <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> </head> <body> ... </body> </html>
... import '../node_modules/reflect-constructor/reflect-constructor.js'; ...