polymer - Polymer 2.x：ES6 基于类的语法，元素定义

Question

在此处的预览文档中，有以下代码：

class MyElement extends Polymer.Element {
  static get is() { return 'my-element' }

我的问题是：MyElement第一行中的位是否必须与第二行中的位匹配my-element？第一位是否以任何方式受到第二位的约束？或相反亦然？

Answer 1

is不，类名与您从getter返回的元素名称无关。例如，可以命名类XFoo和元素名称my-app：

class XFoo extends Polymer.Element {
  static get is() { return 'my-app'; }
}

customElements.define(XFoo.is, XFoo);

该类也可以是匿名的：

customElements.define('my-app', class extends Polymer.Element {
  static get is() { return 'my-app'; }
});

customElement.define()在Web Components Custom Elements spec中定义，这可能是 Polymer 2.0-preview Wiki 中没有解释它的原因。该规范对类名没有任何规定。从规范和MDN中的示例来看，类名通常至少类似于元素名称（可能是为了可维护性）。

• MDN 实例： save-button vs SaveBtn：

  var MySaveBtn = document.registerElement("save-button", SaveBtn);
  

• 自定义元素规范实例： auto-embiggened vs AutoEmbiggenedImage：

  customElements.define("auto-embiggened", AutoEmbiggenedImage, { extends: "img" });