Last active
July 14, 2017 04:52
-
-
Save robdodson/82e1976fa7c8d66d07d2a8f9bd9b461f to your computer and use it in GitHub Desktop.
Load Web Components polyfills with HTMLWebpackPlugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Hello World</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <my-element></my-element> | |
| <!-- | |
| Feature detect Custom Elements support. If the browser DOES support Custom | |
| Elements then we need to load the custom-elements-es5-adapter because | |
| our project code has been transpiled from ES2015 to ES5 and native Custom | |
| Elements expect elements will be registered as classes. | |
| --> | |
| <div id="ce-es5-shim"> | |
| <script type="text/javascript"> | |
| if (!window.customElements) { | |
| var ceShimContainer = document.querySelector('#ce-es5-shim'); | |
| ceShimContainer.parentElement.removeChild(ceShimContainer); | |
| } | |
| </script> | |
| <script type="text/javascript" src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script> | |
| </div> | |
| <!-- | |
| Use the webcomponents-loader script which will feature detect which Web | |
| Components features are missing and lazy load the appropriate polyfills. | |
| When we hear the 'WebComponentsReady' event from the polyfill bundle we can | |
| insert our 'bundle.js'. | |
| --> | |
| <script> | |
| (function() { | |
| document.addEventListener('WebComponentsReady', function componentsReady() { | |
| document.removeEventListener('WebComponentsReady', componentsReady, false); | |
| var script = document.createElement('script'); | |
| script.src = '<%= htmlWebpackPlugin.files.js[0] %>'; | |
| var refScript = document.getElementsByTagName('script')[0]; | |
| refScript.parentNode.insertBefore(script, refScript); | |
| }, false); | |
| })(); | |
| </script> | |
| <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script> | |
| <!-- | |
| IMPORTANT: Make sure you set the inject: false option in HTMLWebpackPlugin so | |
| it doesn't try to insert bundle.js. We're handling loading it ourselves up above. | |
| --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment