Using Polymers own behaviors in Polymer 2.x

Question

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

codeMonkey · Answer 1 · 2017-08-19T18:43:19.463

10

class MyElement extends Polymer.mixinBehaviors([Polymer.IronFormElementBehavior], Polymer.Element) { ... }

edited Aug 19 '17 at 18:43

answered May 12 '17 at 20:01

codeMonkey

4,134
2
31
50

score 6 · Accepted Answer · edited Aug 31 '17 at 02:54

6

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());
  }
}

edited Aug 31 '17 at 02:54

Let Me Tink About It

15,156
21
98
207

answered Mar 27 '17 at 06:57

Eko Putra Pratama

377
3
10

1

Thanks, that is very useful information. Although my question was aimed at something different. I have not written any Polymer 1.0 behaviors so there is nothing I need to convert. When I have to write something like behaviors I would use class expression mixins as they now suggest. I was just wondering why Polymer itself still uses behaviors when they tell us to use class expression mixins. – NicolasR Mar 28 '17 at 15:44
1

All the polymer element behavior is in progress to support Polymer 2.0, but i think they will keep the behavior as global object. I dont't know for sure if they would change the behavior into es6 classes because there is some weekneses in es6 class where you can't extends more than 1 class plus they want to make their element backward compatible with legacy element and Polymer 1.x, thats why they use mixin. – Eko Putra Pratama Mar 29 '17 at 02:28
Ok, that answers my question. So I guess we are free to choose between mixin and class expression in our own components too then. – NicolasR Mar 29 '17 at 08:25

Niklas · Answer 3 · 2019-04-25T09:13:04.343

So I found a way how to use the iron-resizable-behavior in Polymer2
Instead of using the Mixin I am making use of the syntax of codeMonkey and extended his answer to show how to use it
As far as I know, this solution is a hybrid for Polymer 1 & 2

class customElement extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {
    static get is() { return 'custom-element'; }

    ready() {
        super.ready();

        this.addEventListener('iron-resize', () => { this.onWidthChange() });

    }

    onWidthChange() {
        var w = this.offsetWidth;
        if (w > 0)
            console.log("Width of page is now ", w);
    }

}

Using Polymers own behaviors in Polymer 2.x

3 Answers3