Skip to content
Permalink
Browse files

feat(elements): another polyfill solution (#22413)

PR Close #22413
  • Loading branch information...
andrewseguin authored and mhevery committed Mar 15, 2018
1 parent d72f445 commit cf3ff7d21931a9c987d3c2174426be010649a0d2
Showing with 21 additions and 9 deletions.
  1. +3 −1 aio/.angular-cli.json
  2. +18 −5 aio/src/index.html
  3. +0 −3 aio/src/polyfills.ts
@@ -13,7 +13,9 @@
"app/search/search-worker.js",
"favicon.ico",
"pwa-manifest.json",
"google385281288605d160.html"
"google385281288605d160.html",
{ "glob": "custom-elements.min.js", "input": "../node_modules/@webcomponents/custom-elements", "output": "./assets/js" },
{ "glob": "native-shim.js", "input": "../node_modules/@webcomponents/custom-elements/src", "output": "./assets/js" }
],
"index": "index.html",
"main": "main.ts",
@@ -111,11 +111,24 @@
</script>

<script>
// Custom elements should always rely on the polyfill to avoid having to include a shim that
// handles downleveled ES2015 classes. Especially since that shim would break on IE11 which
// can't even parse such code.
if (window.customElements) {
window.customElements['forcePolyfill'] = true;
//load CE polyfill
//HACK: webpack's html plugin mangles the document.write calls if we don't trick it.
//load the ES5 shim for browsers with native CE support
function loadCustomElementsShim(){
document.write('<scri' + 'pt src="assets/js/native-shim.js"><' + '/script>');
}
//load the full custom elements polyfill for browsers without support
function loadCustomElementsPolyfill(){
document.write('<scri' + 'pt src="assets/js/custom-elements.min.js"><' + '/script>');
}
//detect if we have native CE support
if(!window.customElements){
loadCustomElementsPolyfill();
}
else {
loadCustomElementsShim();
}
</script>

@@ -30,9 +30,6 @@
/** HACK: force import of environment.ts/environment.prod.ts to load env specific polyfills */
import './environments/environment';

/** Add support for window.customElements */
import '@webcomponents/custom-elements/custom-elements.min';

/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.

0 comments on commit cf3ff7d

Please sign in to comment.
You can’t perform that action at this time.