0

In Polymer 1.0, I have the following code snippet:-

CustomBehaviorImpl = {
  properties: {
    // Define property here...
    // ...
  },
  // Other custom behaviors definition
  // ...
};

CustomBehavior = [
  Polymer.AppNetworkStatusBehavior,
  CustomBehaviorImpl,
];

How would I do it in Polymer 2.0 to create a CustomMixin class.

Andrew See
  • 1,062
  • 10
  • 21

1 Answers1

0

If you separate the mixins into its own file you can reference them as an Html Import dependency whenever composing an element that uses mixins. Just extend your Polymer class with your custom behaviours.

I think this question has been answered already here on stackoverflow.
Take a look at this one:

Applying Behaviors with JS Mixins in Polymer 2


Example

This is my CustomMixin.html

<script>

  // CustomMixin provides the _customMixin function

  var CustomMixin = function(superClass) {
     return class extends superClass {

        _customMixin() {

        }

     }
  }
</script>

This is my Polymer Element where I make use of the CustomMixin. 

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../CustomMixin/CustomMixin.html">
<dom-module id="my-element">
  <template>
    <style>
     :host {
        display: block;
    }
    </style>
  </template>
  <script>
    class MyElement extends CustomMixin(Polymer.Element) {
      static get is() { return 'my-element'; }
      static get properties() {
        return {
        };
      }
      ready() {
        super.ready();
      }

    }
    window.customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

I actually never tested that code but I believe this should be the way to implement a custom mixin.

Niklas
  • 1,142
  • 16
  • 33
  • I have read the "Applying Behaviors with JS MIxins in Polymer 2", but couldn't really understand how the code actually works. Could you give the actual code that is based on my sample above? – Andrew See Oct 24 '17 at 17:11
  • I added an example on how to add a custom mixin, that is placed in an extra file, into an existing Polymer element. I am using the hybrid behaviors with class-style elements. – Niklas Oct 25 '17 at 11:33
  • I know about defining a custom mixin as per you example, my question was "How to extend Polymer.AppNetworkStatusBehavior into CustomMixin in Polymer2"? – Andrew See Oct 25 '17 at 17:44
  • Oh I am sorry. Have to say I am not really sure whats the best approach there but I believe you could extend your custom-element directly with it or just copy it into your mixin to then change it to your needs. – Niklas Oct 25 '17 at 20:03