From cf3ff7d21931a9c987d3c2174426be010649a0d2 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Thu, 15 Mar 2018 11:06:06 -0700
Subject: [PATCH] feat(elements): another polyfill solution (#22413)

PR Close #22413
---
 aio/.angular-cli.json |  4 +++-
 aio/src/index.html    | 23 ++++++++++++++++++-----
 aio/src/polyfills.ts  |  3 ---
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/aio/.angular-cli.json b/aio/.angular-cli.json
index 8e6e6f240a..09bc7b2b71 100644
--- a/aio/.angular-cli.json
+++ b/aio/.angular-cli.json
@@ -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",
diff --git a/aio/src/index.html b/aio/src/index.html
index 7a279807c2..38d839ab8d 100644
--- a/aio/src/index.html
+++ b/aio/src/index.html
@@ -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>
 
diff --git a/aio/src/polyfills.ts b/aio/src/polyfills.ts
index a7743cf635..67309e5514 100644
--- a/aio/src/polyfills.ts
+++ b/aio/src/polyfills.ts
@@ -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`.