Information

Polyfills

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.

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

import '../node_modules/reflect-constructor/reflect-constructor.js';

@webcomponents/custom-elements

A polyfill from the webcomponents team, bringing custom elements to all browsers.

@webcomponents/shadycss

A polyfill from the webcomponents team, backporting shadowDOM styling support.

@webcomponents/webcomponentsjs

A polyfill from the webcomponents team, backporting other polyfills for web components.

es7-object-polyfill

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.

promise-polyfill

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.

reflect-constructor

Created by us, this little polyfill patches missing contructor for reflect in IE11. It is a specfic issue cause by the babel compilation down to older javascript, so we shim the constructor.

Need a 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.

Where to Put Them?

WWe like Es6 modules; load these into you bootstraped javascript file as much as possible. This can be a good place to add polyfills, automate building of them into projects and keep the list of HTML includes down. We try to limit the amount of work you need to do in the front end, keep HTML clean.

Example of polyfills loaded into HTML


<!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>

Example of polyfills loaded into bootstrap JS file


...

import '../node_modules/reflect-constructor/reflect-constructor.js';

...

©custom-web-component is the property of Paul Smith (ulsmith)

Made with for the Open Source Community pa.ulsmith.net