在 Polymer 2 中应用 JS Mixins 行为

我想要一个我定义的自定义元素Polymer.IronScrollTargetBehavior在聚合物2中。

在聚合物 1 中，这可以通过将其添加到behaviors array:

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

在聚合物2中升级指南，它说你应该：

将“行为”实施为返回类表达式的 mixins.

在链接的文章中，它解释了如何使用以下混入语法：

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

class MyClass extends MyMixin(MyBaseClass) {  
    /* ... */
}

我基本上明白了这里发生的事情（尽管我发现 mixin 语法很难理解），并且我可以让示例代码工作。

我没能做的是将这个概念应用到Polymer.IronScrollTargetBehavior，并为其创建一个 mixin。由于该行为已被定义为对象，因此我不知道将其放入何处。

那么，在这种情况下如何实现正确的 mixin，或者如果我走错了路，如何将定义的 Polymer 行为之一应用到 Polymer 2 中的自定义元素？

您可以通过扩展使用 Polymer 2 混合行为作为 mixinsPolymer.mixinBehaviors(behaviors, klass) where
- behaviors是Behavior对象或行为数组
- klass是元素类。

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>

有关更多详细信息，请搜索 Polymer 源代码mixinBehaviors方法：polymer/lib/legacy/class.html

值得一读：https://www.polymer-project.org/2.0/docs/upgrade#mixins