🚮 Eliminate elementName method

build-system/externs/amp.extern.js

@@ -408,13 +408,6 @@ var AmpElement;
 /** @return {!Signals} */
 AmpElement.prototype.signals = function() {};
 
-/**
- * Must be externed to avoid Closure DCE'ing this function on
- * custom-element.CustomAmpElement.prototype in single-pass compilation.
- * @return {string}
- */
-AmpElement.prototype.elementName = function() {};
-
 var Signals = class {};
 /**
  * @param {string} unusedName

src/custom-element.js

@@ -84,30 +84,15 @@ function isTemplateTagSupported() {
  * Creates a named custom element class.
  *
  * @param {!Window} win The window in which to register the custom element.
- * @param {string} name The name of the custom element.
  * @return {typeof AmpElement} The custom element class.
  */
-export function createCustomElementClass(win, name) {
- const baseCustomElement = /** @type {typeof HTMLElement} */ (createBaseCustomElementClass(
+export function createCustomElementClass(win) {
+ const BaseCustomElement = /** @type {typeof HTMLElement} */ (createBaseCustomElementClass(
  win
  ));
- class CustomAmpElement extends baseCustomElement {
- /**
- * @see https://github.com/WebReflection/document-register-element#v1-caveat
- * @suppress {checkTypes}
- * @param {HTMLElement} self
- */
- constructor(self) {
- return super(self);
- }
- /**
- * The name of the custom element.
- * @return {string}
- */
- elementName() {
- return name;
- }
- }
+ // It's necessary to create a subclass, because the same "base" class cannot
+ // be registered to multiple custom elements.
+ class CustomAmpElement extends BaseCustomElement {}
  return /** @type {typeof AmpElement} */ (CustomAmpElement);
 }
 
@@ -127,15 +112,10 @@ function createBaseCustomElementClass(win) {
  * @abstract @extends {HTMLElement}
  */
  class BaseCustomElement extends htmlElement {
- /**
- * @see https://github.com/WebReflection/document-register-element#v1-caveat
- * @suppress {checkTypes}
- * @param {HTMLElement} self
- */
- constructor(self) {
- self = super(self);
- self.createdCallback();
- return self;
+ /** */
+ constructor() {
+ super();
+ this.createdCallback();
  }
 
  /**
@@ -251,7 +231,7 @@ function createBaseCustomElementClass(win) {
  // `opt_implementationClass` is only used for tests.
  let Ctor =
  win.__AMP_EXTENDED_ELEMENTS &&
- win.__AMP_EXTENDED_ELEMENTS[this.elementName()];
+ win.__AMP_EXTENDED_ELEMENTS[this.localName];
  if (getMode().test && nonStructThis['implementationClassForTesting']) {
  Ctor = nonStructThis['implementationClassForTesting'];
  }
@@ -307,13 +287,6 @@ function createBaseCustomElementClass(win) {
  }
  }
 
- /**
- * The name of the custom element.
- * @abstract
- * @return {string}
- */
- elementName() {}
-
  /** @return {!Signals} */
  signals() {
  return this.signals_;
@@ -1920,12 +1893,11 @@ function isInternalOrServiceNode(node) {
  * Creates a new custom element class prototype.
  *
  * @param {!Window} win The window in which to register the custom element.
- * @param {string} name The name of the custom element.
  * @param {(typeof ./base-element.BaseElement)=} opt_implementationClass For testing only.
  * @return {!Object} Prototype of element.
  */
-export function createAmpElementForTesting(win, name, opt_implementationClass) {
- const Element = createCustomElementClass(win, name);
+export function createAmpElementForTesting(win, opt_implementationClass) {
+ const Element = createCustomElementClass(win);
  if (getMode().test && opt_implementationClass) {
  Element.prototype.implementationClassForTesting = opt_implementationClass;
  }

src/service/custom-element-registry.js

@@ -140,7 +140,7 @@ export function copyElementToChildWindow(parentWin, childWin, name) {
 export function registerElement(win, name, implementationClass) {
  const knownElements = getExtendedElements(win);
  knownElements[name] = implementationClass;
- const klass = createCustomElementClass(win, name);
+ const klass = createCustomElementClass(win);
  win['customElements'].define(name, klass);
 }
 

test/unit/test-base-element.js

@@ -33,7 +33,7 @@ describes.realWin('BaseElement', {amp: true}, env => {
  doc = win.document;
  win.customElements.define(
  'amp-test-element',
- createAmpElementForTesting(win, 'amp-test-element', BaseElement)
+ createAmpElementForTesting(win, BaseElement)
  );
  customElement = doc.createElement('amp-test-element');
  element = new BaseElement(customElement);

test/unit/test-custom-element.js

@@ -117,12 +117,8 @@ describes.realWin('CustomElement', {amp: true}, env => {
  doc.body.appendChild(container);
  chunkInstanceForTesting(env.ampdoc);
 
- ElementClass = createAmpElementForTesting(win, 'amp-test', TestElement);
- StubElementClass = createAmpElementForTesting(
- win,
- 'amp-stub',
- ElementStub
- );
+ ElementClass = createAmpElementForTesting(win, TestElement);
+ StubElementClass = createAmpElementForTesting(win, ElementStub);
 
  win.customElements.define('amp-test', ElementClass);
  win.customElements.define('amp-stub', StubElementClass);
@@ -1668,11 +1664,7 @@ describes.realWin('CustomElement Service Elements', {amp: true}, env => {
  beforeEach(() => {
  win = env.win;
  doc = win.document;
- StubElementClass = createAmpElementForTesting(
- win,
- 'amp-stub2',
- ElementStub
- );
+ StubElementClass = createAmpElementForTesting(win, ElementStub);
  win.customElements.define('amp-stub2', StubElementClass);
  env.ampdoc.declareExtension('amp-stub2');
  element = new StubElementClass();
@@ -1833,11 +1825,7 @@ describes.realWin('CustomElement', {amp: true}, env => {
  win = env.win;
  doc = win.document;
  clock = lolex.install({target: win});
- ElementClass = createAmpElementForTesting(
- win,
- 'amp-test-loader',
- TestElement
- );
+ ElementClass = createAmpElementForTesting(win, TestElement);
  win.customElements.define('amp-test-loader', ElementClass);
  win.__AMP_EXTENDED_ELEMENTS['amp-test-loader'] = TestElement;
  LOADING_ELEMENTS_['amp-test-loader'.toUpperCase()] = true;
@@ -2210,11 +2198,7 @@ describes.realWin('CustomElement Overflow Element', {amp: true}, env => {
  beforeEach(() => {
  win = env.win;
  doc = win.document;
- ElementClass = createAmpElementForTesting(
- win,
- 'amp-test-overflow',
- TestElement
- );
+ ElementClass = createAmpElementForTesting(win, TestElement);
  win.customElements.define('amp-test-overflow', ElementClass);
  mutator = Services.mutatorForDoc(doc);
  mutatorMock = env.sandbox.mock(mutator);

test/unit/test-dom.js

@@ -1277,7 +1277,7 @@ describes.realWin(
  env.win.setTimeout(() => {
  env.win.customElements.define(
  'amp-test',
- createAmpElementForTesting(env.win, 'amp-test', TestElement)
+ createAmpElementForTesting(env.win, TestElement)
  );
  }, 100);
  return dom.whenUpgradedToCustomElement(element).then(element => {

test/unit/test-intersection-observer.js

@@ -324,11 +324,7 @@ describe('IntersectionObserver', () => {
  }
  }
 
- const ElementClass = createAmpElementForTesting(
- window,
- 'amp-int',
- TestElement
- );
+ const ElementClass = createAmpElementForTesting(window, TestElement);
  customElements.define('amp-int', ElementClass);
 
  const iframeSrc =

testing/describes.js

@@ -931,7 +931,7 @@ function installAmpAdStylesPromise(win) {
 function createAmpElement(win, opt_name, opt_implementationClass) {
  // Create prototype and constructor.
  const name = opt_name || 'amp-element';
- const proto = createAmpElementForTesting(win, name).prototype;
+ const proto = createAmpElementForTesting(win).prototype;
  const ctor = function() {
  const el = win.document.createElement(name);
  el.__proto__ = proto;