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

PR Close #22413

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",

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>
 

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`.