🚀♻️ Custom Elements V1 Polyfill

build-system/dep-check-config.js

@@ -291,6 +291,8 @@ exports.rules = [
       'src/polyfills.js->src/polyfills/object-assign.js',
       'src/polyfills.js->src/polyfills/promise.js',
       'src/polyfills.js->src/polyfills/array-includes.js',
+      'src/polyfills.js->src/polyfills/custom-elements.js',
+      'src/service/extensions-impl.js->src/polyfills/custom-elements.js',
       'src/service/extensions-impl.js->src/polyfills/document-contains.js',
       'src/service/extensions-impl.js->src/polyfills/domtokenlist-toggle.js',
     ],

build-system/tasks/bundle-size.js

@@ -22,7 +22,7 @@ const log = require('fancy-log');
 const {getStdout} = require('../exec');
 
 const runtimeFile = './dist/v0.js';
-const maxSize = '79.28KB';
+const maxSize = '80.60KB';
 
 const {green, red, cyan, yellow} = colors;
 

build-system/tasks/compile.js

@@ -282,21 +282,19 @@ function compile(entryModuleFilenames, outputDir,
     // once. Since all files automatically wait for the main binary to load
     // this works fine.
     if (options.includeOnlyESMLevelPolyfills) {
-      const polyfillsShadowList = [
-        'array-includes.js',
-        'document-contains.js',
-        'domtokenlist-toggle.js',
-        'math-sign.js',
-        'object-assign.js',
-        'promise.js',
-      ];
+      const polyfills = fs.readdirSync('src/polyfills');
+      const polyfillsShadowList = polyfills.filter(p => {
+        // custom-elements polyfill must be included.
+        return p !== 'custom-elements.js';
+      });
       srcs.push(
           '!build/fake-module/src/polyfills.js',
           '!build/fake-module/src/polyfills/**/*.js',
           '!build/fake-polyfills/src/polyfills.js',
-          '!src/polyfills/*.js',
+          'src/polyfills/custom-elements.js',
           'build/fake-polyfills/**/*.js');
       polyfillsShadowList.forEach(polyfillFile => {
+        srcs.push(`!src/polyfills/${polyfillFile}`);
         fs.writeFileSync('build/fake-polyfills/src/polyfills/' + polyfillFile,
             'export function install() {}');
       });

build-system/tasks/presubmit-checks.js

@@ -545,6 +545,7 @@ const forbiddenTerms = {
     whitelist: [
       'src/log.js', // Has actual implementation of assertElement.
       'dist.3p/current/integration.js', // Includes the previous.
+      'src/polyfills/custom-elements.js',
     ],
   },
   'startupChunk\\(': {

extensions/amp-form/0.1/form-proxy.js

@@ -88,28 +88,39 @@ function createFormProxyConstr(win) {
   }
 
   const FormProxyProto = FormProxy.prototype;
+  const {Object} = win;
+  const ObjectProto = Object.prototype;
 
   // Hierarchy:
   //   Node  <==  Element <== HTMLElement <== HTMLFormElement
   //   EventTarget  <==  HTMLFormElement
-  const inheritance = [
+  const baseClasses = [
     win.HTMLFormElement,
-    win.HTMLElement,
-    win.Element,
-    win.Node,
     win.EventTarget,
   ];
-  inheritance.forEach(function(klass) {
-    const prototype = klass && klass.prototype;
-    for (const name in prototype) {
-      const property = win.Object.getOwnPropertyDescriptor(prototype, name);
+  const inheritance = baseClasses.reduce((all, klass) => {
+    let proto = klass && klass.prototype;
+    while (proto && proto !== ObjectProto) {
+      if (all.indexOf(proto) >= 0) {
+        break;
+      }
+      all.push(proto);
+      proto = Object.getPrototypeOf(proto);
+    }
+
+    return all;
+  }, []);
+
+  inheritance.forEach(proto => {
+    for (const name in proto) {
+      const property = win.Object.getOwnPropertyDescriptor(proto, name);
       if (!property ||
           // Exclude constants.
           name.toUpperCase() == name ||
           // Exclude on-events.
           startsWith(name, 'on') ||
           // Exclude properties that already been created.
-          win.Object.prototype.hasOwnProperty.call(FormProxyProto, name) ||
+          ObjectProto.hasOwnProperty.call(FormProxyProto, name) ||
           // Exclude some properties. Currently only used for testing.
           (blacklistedProperties && blacklistedProperties.includes(name))) {
         continue;
@@ -118,19 +129,19 @@ function createFormProxyConstr(win) {
         // A method call. Call the original prototype method via `call`.
         const method = property.value;
         FormProxyProto[name] = function() {
-          return method.apply(this.form_, arguments);
+          return method.apply(/** @type {!FormProxy} */(this).form_, arguments);
         };
       } else {
         // A read/write property. Call the original prototype getter/setter.
         const spec = {};
         if (property.get) {
           spec.get = function() {
-            return property.get.call(this.form_);
+            return property.get.call(/** @type {!FormProxy} */(this).form_);
           };
         }
         if (property.set) {
-          spec.set = function(value) {
-            return property.set.call(this.form_, value);
+          spec.set = function(v) {
+            return property.set.call(/** @type {!FormProxy} */(this).form_, v);
           };
         }
         win.Object.defineProperty(FormProxyProto, name, spec);

src/custom-element.js

@@ -1756,11 +1756,11 @@ function isInternalOrServiceNode(node) {
  * @param {function(new:./base-element.BaseElement, !Element)=} opt_implementationClass For testing only.
  * @return {!Object} Prototype of element.
  */
-export function createAmpElementProtoForTesting(
+export function createAmpElementForTesting(
   win, name, opt_implementationClass) {
-  const ElementProto = createCustomElementClass(win, name).prototype;
+  const Element = createCustomElementClass(win, name);
   if (getMode().test && opt_implementationClass) {
-    ElementProto.implementationClassForTesting = opt_implementationClass;
+    Element.prototype.implementationClassForTesting = opt_implementationClass;
   }
-  return ElementProto;
+  return Element;
 }

src/polyfills.js

@@ -14,20 +14,25 @@
  * limitations under the License.
  */
 
+import {getMode} from './mode';
 import {install as installArrayIncludes} from './polyfills/array-includes';
+import {install as installCustomElements} from './polyfills/custom-elements';
 import {
   install as installDOMTokenListToggle,
 } from './polyfills/domtokenlist-toggle';
 import {install as installDocContains} from './polyfills/document-contains';
 import {install as installMathSign} from './polyfills/math-sign';
 import {install as installObjectAssign} from './polyfills/object-assign';
 import {install as installPromise} from './polyfills/promise';
-// Importing the document-register-element module has the side effect
-// of installing the custom elements polyfill if necessary.
-import {installCustomElements} from
+import {installCustomElements as installRegisterElement} from
   'document-register-element/build/document-register-element.patched';
+import {isExperimentOn} from './experiments';
 
-installCustomElements(self, 'auto');
+if (isExperimentOn(self, 'custom-elements-v1') || getMode().test) {
+  installCustomElements(self, class {});
+} else {
+  installRegisterElement(self, 'auto');
+}
 installDOMTokenListToggle(self);
 installMathSign(self);
 installObjectAssign(self);