CODEWITHSUNDEEP
polymeres6-classes6-modulespolymer-2.x
Let Me Tink About It
Let Me Tink About It

Reputation: 16112

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

In the preview documentation here, there is the following bit of code:

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

My question is: Does the MyElement bit in the first line have to match the my-element bit in the second line? Is the first bit constrained by the second in any way? Or vice versa?

Upvotes: 1

Views: 457

Answers (1)

tony19
tony19

Reputation: 138326

No, the classname has no bearing on the element name that you return from the is getter. For example, the class could be named XFoo and the element name my-app:

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

customElements.define(XFoo.is, XFoo);

The class could also be anonymous:

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

customElement.define() is defined in the 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, the classname usually at least resembles the element name (likely for maintainability).

  • MDN instance: save-button vs SaveBtn:

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

  • Custom Elements Spec instance: auto-embiggened vs AutoEmbiggenedImage:

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

Upvotes: 4

Related Questions