fix(docs-infra): avoid unnecessarily loading Custom Elements ES5 shim (#41162)

The custom elements spec is not compatible with ES5 style classes. This
means ES2015 code compiled to ES5 will not work with a native
implementation of Custom Elements. To support browsers that natively
support Custom Elements but not ES2015 modules, we load
`@webcomponents/custom-elements/src/native-shim.js`, which minimally
augments the native implementation to be compatible with ES5 code.
(See [here][1] for more details.)

Previously, the shim was included in `polyfills.ts`, which meant it was
loaded in all browsers (even those supporting ES2015 modules and thus
not needing the shim).

This commit moves the shim from `polyfills.ts` to a `nomodule` script
tag in `index.html`. This will ensure that it is only loaded in browsers
that do not support ES2015 modules and thus do not needed the shim.

NOTE:
This commit also reduces size of the polyfills bundle by ~400B
(52609B --> 52215B).

[1]: https://www.npmjs.com/package/@webcomponents/custom-elements#es5-vs-es2015

PR Close #41162

aio/angular.json

@@ -45,11 +45,6 @@
               "src/generated",
               "src/pwa-manifest.json",
               "src/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",
@@ -157,11 +152,6 @@
               "src/generated",
               "src/pwa-manifest.json",
               "src/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",

aio/ngsw-config.json

@@ -13,6 +13,7 @@
           "/assets/js/*.js",
           "/*.css",
           "/*.js",
+          "!/assets/js/native-shim.js",
           "!/*-es5*.js"
         ],
         "urls": [
@@ -39,6 +40,7 @@
       "resources": {
         "files": [
           "/assets/images/favicons/**",
+          "/assets/js/native-shim.js",
           "/*-es5*.js",
           "!/**/_unused/**"
         ]

aio/src/index.html

@@ -108,6 +108,18 @@
       <b><i>This website requires JavaScript.</i></b>
     </h2>
   </noscript>
+
+  <!--
+    Custom Element ES5 shim. Required for browsers that natively support Custom Elements, but do not
+    support ES2015 modules.
+    NOTE: Chrome, Firefox and Safari should not need this, because they added support for ES2015
+          modules before Custom Elements. It is still required for some other (less common) browsers:
+          - UC browser for android 11.8 (~3.5% global usage)
+          - Samsung browser 5.0-8.1 (~0.43% global usage)
+          - Opera 41-47 (~0.02% global usage)
+  -->
+  <script src="assets/js/native-shim.js" nomodule></script>;
+
 </body>
 
 </html>

aio/src/polyfills.ts

@@ -65,11 +65,3 @@ import 'zone.js';  // Included with Angular CLI.
  */
 // Custom Elements polyfill. Required for browsers that do not natively support Custom Elements.
 import '@webcomponents/custom-elements';
-// Custom Element ES5 shim. Required for browsers that natively support Custom Elements, but do not
-// support ES2015 modules.
-// NOTE: Chrome, Firefox and Safari should not need this, because they added support for ES2015
-//       modules before Custom Elements. It is still required for some other (less common) browsers:
-//       - UC browser for android 11.8 (~3.5% global usage)
-//       - Samsung browser 5.0-8.1 (~0.43% global usage)
-//       - Opera 41-47 (~0.02% global usage)
-import '@webcomponents/custom-elements/src/native-shim';

goldens/size-tracking/aio-payloads.json

@@ -4,7 +4,7 @@
       "uncompressed": {
         "runtime-es2015": 3033,
         "main-es2015": 450953,
-        "polyfills-es2015": 52343
+        "polyfills-es2015": 52215
       }
     }
   },
@@ -13,7 +13,7 @@
       "uncompressed": {
         "runtime-es2015": 3033,
         "main-es2015": 451402,
-        "polyfills-es2015": 52493
+        "polyfills-es2015": 52215
       }
     }
   },
@@ -22,7 +22,7 @@
       "uncompressed": {
         "runtime-es2015": 3153,
         "main-es2015": 437005,
-        "polyfills-es2015": 52493
+        "polyfills-es2015": 52215
       }
     }
   }