Some browsers do not support ES6 modules, custom elements, shadow DOM, and custom CSS variables yet. We’ll need to add some polyfills to make everything work in our supported browsers.
The easiest way to get everything working is to add the following polyfills to the head of your document.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PatternFly Elements</title> <!-- polyfills --> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script> </head> <body></body> </html>
Custom elements ES5 adapter
This polyfill is needed if your custom elements have been compiled from ES6 to ES5. It’s not necessary to include this polyfill for IE11 and it will throw a syntax error in IE11 because the adapter was written in ES6. However, you can ignore this error because it will not cause issues with your elements.
Includes UMD (universal module definition) wrapper in the compiled version which checks for
- AMD (Asynchronous Module Definition)
- Global, window.
- This handles all of the dependency management for you
- Specifies how to load a module, dependencies, and load order
- If require cannot be used, we could inline all the script tags. HTTP2 + server push would allow them to load all at once.
- If you don’t have HTTP2 + server push, it might take a little longer. If you have 3 cards on the page, would it load that script 3 times? No because cache.
The card could show up on the page with pfe-card.js, which then declares a dependency on pfelement.js.
Check out the ES6 pfelement and include it.
polyfills--<component-name>.js and import that file into your component using the following syntax. Be sure to specify what functions are being defined inside the polyfills file in the comment section above the import statement.
// Import polyfills: <list of function names> import "polyfills--<component-name>.js";
In your polyfills file, please prefix each addition with the name of the polyfill and the URL from which it was copied. Please use the following syntax so that we can easily report on/grep for these values:
// @POLYFILL Array.prototype.find // https://tc39.github.io/ecma262/#sec-array.prototype.find