How to load polyfills to handle Web Components?

In this article I will explain you how I handled the latest ES6 and Web Components features.
If you are starting to work with Web Components you should know that they are well supported by Chrome, Firefox, Safari and Microsoft announced this year that they are working to support them.
So you don't need to load polyfills statically, increasing the weight of the final package.

For this reason I created a specific bundle to load polyfills at runtime when browsers don't support it.
I listed the most used features split by types. Below you can find the code:

As you can see I created a function where I define my WC and then I used dynamic import to enable code splitting to load all polyfills. The file contains all features that I need like fetch, es6 and WC features. Check the code:

To enable code splitting with webpack you need to install the following package:

$ npm i --save-dev @babel/plugin-syntax-dynamic-import

After that add the package in your babel setup (.babelrc or babel.config.js):

$  plugins: [
$   '@babel/plugin-syntax-dynamic-import'
$  ]

This demo works without the help of polyfills in Chrome, Safari, Firefox and Edge

If you try to launch the application with IE11, you will see the polyfill loaded:

If you need to see the code, below you can find the links of my repositories:

• Web Components Scaffolding
• Exchange Rates

Are Web Components the future? I don't know but with the right approach you can build reusable components that work in all browsers without load polyfills if you don't need it.

Keep calm and code!