How to extend Polymer.AppNetworkStatusBehavior into custom Mixin in Polymer2? - polymer-2.x

Question

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.

Answer 1

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.