Inheritance of customized polymer element in version 1.0 - polymer

Question

I have two polymer elements which have similar characteristics. I'm trying to "merge" those two to one element. What I see in the documentation is that custom elements can not be inherited in polymer 1.0.
It starts here:
<div title="{{tile.description}}" class="flex-item">
<template is='dom-if' if='{{typeIsSingle}}'>
<single-item-tile tile='{{tile}}'></single-item-tile>
</template>
<template is='dom-if' if='{{typeIsGrouped}}'>
<multiple-items-tile tile='{{tile}}'></multiple-items-tile>
</template>
...
And here are the two very similar elements:
<dom-module id="single-item-tile">
<style>
.big {
--iron-icon-width: 96px;
--iron-icon-height: 96px;
}
</style>
<template>
<paper-button on-click="navigateTo">
<iron-icon class="big" icon="{{icon}}"></iron-icon>
<h4>{{tile.label}}</h4>
</paper-button>
</template>
<script>
Polymer({
is: 'single-item-tile',
properties: {
label: String,
icon: {
type: String,
value: "check-box-outline-blank"
},
tile: Object
},
navigateTo: function () {
window.open(this.tile.url + "?id=" + this.tile.landingPageQuestionnaireItems[0].id);
}
});
</script>
</dom-module>
And:
<dom-module id="multiple-items-tile">
<style>
.big {
--iron-icon-width: 96px;
--iron-icon-height: 96px;
}
paper-dialog.size-position {
position: relative;
top: -180px;
left: 20px;
min-width: 200px;
min-height: 150px;
background: #fff;
}
.questionnaireItemToChoose:hover {
background-color: #e3e3e3;
}
</style>
<template>
<paper-button on-click="showGroupedItems">
<iron-icon class="big" icon="{{icon}}"></iron-icon>
<h4>{{tile.label}}</h4>
</paper-button>
<paper-dialog id="questionnaire-selector" class="big size-position" heading="Questionnaires" >
<iron-selector>
<template is='dom-repeat' items='{{tile.landingPageQuestionnaireItems}}'>
<div id="{{item.id}}" class="questionnaireItemToChoose" on-click="handleClick">{{item.label}}</div>
</template>
</iron-selector>
</paper-dialog>
</template>
<script>
Polymer({
is: 'multiple-items-tile',
properties: {
label: String,
icon: {
type: String,
value: "content-copy"
},
tile: Object
},
showGroupedItems: function (e) {
var dialog = document.getElementById('questionnaire-selector');
if (dialog) {
dialog.open();
}
},
handleClick: function(e) {
var dialog = document.getElementById('questionnaire-selector');
dialog.close();
window.open(this.tile.url + "?id=" + e.currentTarget.id);
}
});
</script>
</dom-module>

Answer 1

The current workaround for the lack of inheritance in Polymer 1.0 are shared behaviors.
You can try to extract the common behavior of both custom elements into a separate behavior which you implement in both of your custom elements:
tile-behavior.html:
<script>
TiteBehavior = {
properties: {
label: String,
icon: {
type: String,
value: "content-copy"
},
tile: Object
},
commonFunction: function() { },
....
};
</script>
<dom-module id="multiple-items-tile">
...
<script>
Polymer({
is: 'multiple-items-tile',
behaviors: [TileBehavior],
});
</script>
</dom-mdoule>
<dom-module id="single-item-tile">
...
<script>
Polymer({
is: 'single-item-tile',
behaviors: [TileBehavior],
});
</script>
</dom-mdoule>