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

Question

In the preview documentation here，有如下代码：

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

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

Answer 1

不，class名称与您在 is getter 中 return 的元素名称无关。例如，class 可以命名为 XFoo，元素名称可以命名为 my-app:

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

customElements.define(XFoo.is, XFoo);

class也可以是匿名的：

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

customElement.define() 在 Web Components Custom Elements spec, which might be why it's not explained in the Polymer 2.0-preview Wiki. The spec does not impose any stipulations on the classname. From examples in the spec and in MDN 中定义，class 名称通常至少类似于元素名称（可能是为了可维护性）。

MDN 实例： save-button 对比 SaveBtn：

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

自定义元素规范实例： auto-embiggened 对比 AutoEmbiggenedImage：

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

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

Polymer 2.x: ES6 Class-based Syntax, element definition

polymer

es6-class

es6-modules

polymer-2.x