polymer Polymer Cheat Sheet Defining a mixin
Example
Docs: mixins, hybrid elements.
Defining a class expression mixin to share implementation between different elements:
<script>
MyMixin = function(superClass) {
return class extends superClass {
// Code that you want common to elements.
// If you're going to override a lifecycle method, remember that a) you
// might need to call super but b) it might not exist.
connectedCallback() {
if (super.connectedCallback) {
super.connectedCallback();
}
/* ... */
}
}
}
</script>
Using the mixin in an element definition:
<dom-module id="element-name">
<template><!-- ... --></template>
<script>
// This could also be a sequence:
// class MyElement extends AnotherMixin(MyMixin(Polymer.Element)) { … }
class MyElement extends MyMixin(Polymer.Element) {
static get is() { return 'element-name' }
/* ... */
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
Using hybrid behaviors (defined in the 1.x syntax) as mixins:
<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>
