Applying Behavior with JS Targets in Polymer 2

Question

I need a custom element that I define in order to have Polymer.IronScrollTargetBehavior in Polymer 2.

In Polymer 1, this can be done by adding it to the behaviors array:

 Polymer({ is: 'my-element', behaviors: [Polymer.IronScrollTargetBehavior] }); 

The Polymer 2 Upgrade Guide says you should:

Implement "behavior" as mixins that return class expressions .

A related article explains how you can use the following syntax for mixins:

 let MyMixin = (superclass) => class extends superclass { foo() { console.log('foo from MyMixin'); } }; class MyClass extends MyMixin(MyBaseClass) { /* ... */ } 

I basically get what happens here (although I find the mixin syntax makes my brain more difficult), and I can get some sample code to work with.

What I could not do was apply this concept to Polymer.IronScrollTargetBehavior and create a mixin for it. Since this behavior is already defined as an object, I do not know where to insert it.

So, how do I implement the proper mixin in this scenario, or if I'm wrong, how do I apply one of the specific Polymer types to my custom element in Polymer 2?

Answer 1

Polymer 2.0 has a compatibility level that still supports the old Polymer function syntax. Most preview 2.0 elements, if not all, still retain the old syntax. Violation of changes is mainly associated with dom-module markup.

If you are creating new elements, it is recommended that you move on to class-based syntax. If, however, you transfer 1.0 elements to 2.0 and these elements rely on Polymer behavior, I don’t think you have a choice at this point, but to preserve the old syntax.

In class-based syntax, you can freely model multiple inheritance of mixins class elements with something like this

  let Mixin = (superclass) => new MixinBuilder(superclass); class MixinBuilder { constructor(superclass) { this.superclass = superclass; } with(...mixins) { return mixins.reduce((c, mixin) => mixin(c), this.superclass); } } const MyMixin = subclass => class extends subclass { _test(){ } } const MyMixinTwo = subclass => class extends subclass { _testTwo(){ } } class MyElement extends Mixin(Polymer.Element).with(MyMixin,MyMixin2) { static get is() { return 'my-element' } } 

You can split MixinBuilder into your own file, and then reference it as an HTML import dependency when creating elements using mixins.

Answer 2

You can use the hybrid behavior of Polymer 2 as mixins by extending Polymer.mixinBehaviors(behaviors, klass) where
- behaviors is a Behavior object or array of behavior
- klass - class Element.

i.e.

 <dom-module id="element-name"> <template><!-- ... --></template> <script> class MyElement extends Polymer.mixinBehaviors([MyBehavior, MyBehavior2], Polymer.Element) { static get is() { return 'element-name' } /* ... */ } customElements.define('element-name', MyElement); </script> </dom-module> 

For more information, find the Polymer source code for the mixinBehaviors method: polymer/lib/legacy/class.html

worth reading: https://www.polymer-project.org/2.0/docs/upgrade#mixins