CODEWITHSUNDEEP
polymer-2.x
lycandroid
lycandroid

Reputation: 311

Polymer 2.x. Extend properties of polymer element

Using the Polymer 2.x syntax to create a class that extends another class (which is extended from Polymer.Element), is it possible to define a default set of properties in the super class which can be overridden in the child class?

My attempt was:

class ParentClass extends Polymer.Element
   static get properties() {
      return {
        myProperty: {
           type: String,
           value: "x"
        }
      }
   }
}

class ChildClass extends ParentClass {
   static get properties() {
      return {
        myProperty2: String
      }
   }
}

When ParentClass is created the expectation is that myProperty == "x", and when ChildClass is created to have myProperty == "x" and have an additional property of myProperty2. In practice, ChildClass only has myProperty2.

Maybe ChildClass should call the super class properties and merge properties, but I can't find a way to call the super class perhaps because it is declared static (?).

Upvotes: 0

Views: 530

Answers (1)

Ofisora
Ofisora

Reputation: 2737

You need to import parent-class inside child-class element. Then, to access the parent-class's property simply call as that property is on child-class like: this.myProperty.

You can also override the property value in child-class.

Here is a demo in plnkr: http://plnkr.co/edit/7kkitdcCZkbySNClxgTo?p=preview.

Note: The properties and observers of a subclass(child class) are added to those defined by the superclass(parent class).

A subclass can also inherit a template from its superclass.

Upvotes: 1

Related Questions