Last active
August 29, 2017 23:48
-
-
Save ianjosephwilson/a6be4e4eaa921aced89d602ef1b1f157 to your computer and use it in GitHub Desktop.
polymer2 MPA -- 99% of this code is copied from the polymer webpack loader demo
This file contains 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>Page 1</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
</head> | |
<body> | |
<h1>Page 1</h1> | |
<!-- | |
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 sources = [ | |
'/static/webpacked-components-base.js', | |
'/static/webpacked-components-extras-a.js' | |
]; | |
var script, refscript, i, length = sources.length; | |
for (i=0; i<length; i+=1 ) { | |
script = document.createElement('script'); | |
script.src = sources[i]; | |
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> |
This file contains 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>Page 2</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
</head> | |
<body> | |
<h1>Page 2</h1> | |
<!-- | |
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 sources = [ | |
'/static/webpacked-components-base.js', | |
'/static/webpacked-components-extras-b.js' | |
]; | |
var script, refscript, i, length = sources.length; | |
for (i=0; i<length; i+=1 ) { | |
script = document.createElement('script'); | |
script.src = sources[i]; | |
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