Using Polymers own behaviors in Polymer 2.x
class MyElement extends Polymer.mixinBehaviors([Polymer.IronFormElementBehavior], Polymer.Element) { ... }
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());
}
}
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);
}
}