Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Polymers own behaviors in Polymer 2.x

I am experimenting with Polymer 2.x and what I don't understand is how to use Polymers own behaviors in Polymer 2.x, iron-resizable-behavior as an example.

The Polymer 2.0 upgrade guide tells us that for our own components we should work with class expression mixins. That's fine but what about Polymers own behaviors? Are they in the progress of being rewritten as mixins or will they remain unchanged? There is a Polymer.mixinBehaviors method that seems to allow me to use Polymer 1.x mixins. Is this the final solution or is this an intermediate step?

To phrase it another way: are the Polymer behaviors considered Polymer 2.x although we are told to use mixins for our own components?

Sources:

https://www.polymer-project.org/2.0/docs/upgrade#upgrading-to-class-based-elements

Applying Behaviors with JS Mixins in Polymer 2

like image 591
NicolasR Avatar asked Mar 21 '17 00:03

NicolasR


People also ask

What is polymer behavior?

Polymers have their behavior mainly influenced by the conformation and configuration of their molecular structure, which define properties like glass transition temperature, stress–strain relation, melt viscosity, impact resistance, among many others.

What is Polymer 2?

Polymer 2.0 is designed to support the new custom elements v1 and shadow DOM v1 specifications being implemented by most major browser vendors, while providing a smooth migration path for Polymer 1. x users. Polymer 2.0 also makes improvements in several areas: Improved interoperability.


2 Answers

class MyElement extends Polymer.mixinBehaviors([Polymer.IronFormElementBehavior], Polymer.Element) { ... }
like image 192
codeMonkey Avatar answered Sep 20 '22 16:09

codeMonkey


I think Polymer has an API for that. I think it is dedupingMixin. Below is an example how to create a mixin for your own behavior and how to use it in your element class.

var MyBehaviorMixin = Polymer.dedupingMixin(function(superClass){
  return class MyBehavior extends superClass {
    constructor() {
      super();
    }

    methodInBehavior() {
      return "this method is defined in Behavior";
    }
  }
}
class MyElement extends MyBehaviorMixin(Polymer.Element){
  constructor(){
    super();
    console.log(this.methodInBehavior());
  }
}
like image 36
Eko Putra Pratama Avatar answered Sep 18 '22 16:09

Eko Putra Pratama