聚合物2.X：基於類的語法ES6，元素定義

Question

In the preview documentation here，有下面的代碼位：

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

我的問題是：是否在第一行MyElement位必須匹配my-element位在第二行？第一位是否受到第二位的限制？或相反亦然？

Answer 1

不，該類名對您從is獲得者返回的元素名稱沒有影響。例如，類可以被命名爲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" });