Polymer inheritance, parent methods undefined - polymer

Question

I am trying to understand how Polymer inheritance works.
I have a parent element fow-filter that contains general filter methods.
<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="fow-filter" attributes="">
<template>
<style>
:host {
display: block;
}
</style>
</template>
<script>
(function () {
Polymer("fow-filter",{
created: function(){
console.log("created");
},
ready: function(){
console.log("ready");
},
filterOnRange: function(cardList, key, min, max){
min = parseInt(min);
max = parseInt(max);
if(cardList){
return cardList.filter(
function(card){
return (card[key] >= min) && (card[key] <= max);
}
);
} else {
return [];
}
},
filterOnText: function(cardList, key, filterString, remaining){
if(filterString === "" || filterString === "radio_all"){
return cardList;
}
else if(cardList){
var self = this;
return cardList.filter(
function(card){
//console.log(card);
if( self.strictMatch(card[key], filterString) ){
return true;
} else if(remaining){
remaining.push(card);
}
return false;
}
);
} else {
return [];
}
},
strictMatch: function(text, textToSearch){
if(text && textToSearch){
return ( text.toUpperCase().indexOf(textToSearch.toUpperCase()) > -1 );
} else{
return false;
}
},
fuzzyMatch: function(text, textToSearch){
var search = textToSearch.toUpperCase();
var text = text.toUpperCase();
var j = -1; // remembers position of last found character
// consider each search character one at a time
for (var i = 0; i < search.length; i++) {
var l = search[i];
if (l == ' ') {
continue; // ignore spaces
}
j = text.indexOf(l, j+1); // search for character & update position
if (j == -1) {
return false; // if it's not found, exclude this item
}
}
return true;
}
});
})();
</script>
</polymer-element>
And I have another elements that extends it:
fow-card-filter
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../elements/elements.html">
<polymer-element name="fow-card-filter" attributes="filteredCards cards nameFilter descriptionFilter attributeFilter typeFilter rarityFilter expansionFilter minCost maxCost minCost maxCost minATK maxATK minDEF maxDEF" extends="fow-filter">
<template>
<style>
:host {
display: block;
}
</style>
</template>
<script>
Polymer("fow-card-filter",{
observe: {
"cards nameFilter descriptionFilter attributeFilter typeFilter" : "updateFilteredCards",
"rarityFilter expansionFilter minCost maxCost" : "updateFilteredCards",
"minCost maxCost minATK maxATK minDEF maxDEF" : "updateFilteredCards"
},
created: function (){
this.resetFilters();
},
resetFilters: function(){
this.nameFilter = "";
this.descriptionFilter = "";
this.attributeFilter = "radio_all";
this.typeFilter = "radio_all";
this.rarityFilter = "radio_all";
this.expansionFilter = "radio_all";
this.minCost = "0";
this.maxCost = "20";
this.minATK = "0";
this.maxATK = "10000";
this.minDEF = "0";
this.maxDEF = "10000";
},
updateFilteredCards: function(){
this.filteredCards = this.filterOnText(this.cards, "Name", this.nameFilter);
if(this.descriptionFilter){
this.filteredCards = this.filterOnText(this.filteredCards, "Cardtext", this.descriptionFilter);
}
if(this.attributeFilter){
this.filteredCards = this.filterOnText(this.filteredCards, "Attribute", this.attributeFilter);
}
if(this.rarityFilter){
this.filteredCards = this.filterOnText(this.filteredCards, "Rarity", this.rarityFilter);
}
if(this.expansionFilter){
this.filteredCards = this.filterOnText(this.filteredCards, "Expansion", this.expansionFilter);
}
if(this.typeFilter === "spell"){
//optimize filter
var remainingCards = [];
var spellCards = this.filterOnText(this.filteredCards, "Type", this.typeFilter, remainingCards);
var remainingCards2 = [];
var chantCards = this.filterOnText(remainingCards, "Type", "Chant", remainingCards2);
var istantCards = this.filterOnText(remainingCards2, "Type", "Instant");
this.filteredCards = spellCards.concat(chantCards,istantCards);
} else {
this.filteredCards = this.filterOnText(this.filteredCards, "Type", this.typeFilter);
}
this.filteredCards = this.filterOnRange(this.filteredCards, "Total Cost", this.minCost, this.maxCost);
if((this.typeFilter !== 'spell') && (this.typeFilter !== 'addition')){
this.filteredCards = this.filterOnRange(this.filteredCards, "Total Cost", this.minCost, this.maxCost);
this.filteredCards = this.filterOnRange(this.filteredCards, "ATK", this.minATK, this.maxATK);
this.filteredCards = this.filterOnRange(this.filteredCards, "DEF", this.minDEF, this.maxDEF);
}
}
});
</script>
</polymer-element>
However it seems that my fow-card-filter element does not see its parent methods, every time I call them i get a:
Exception caught during observer callback: TypeError: undefined is not a function
e.g.
this.filteredCards = this.filterOnText(this.cards, "Name", this.nameFilter);
Am I doing something wrong or is there something I am missing about Polymer inheritance?
EDIT:
I don't know why the created and ready methods are called in the parent fow-filter element without first entering the fow-card-filter element ready method.
Calling this.super() in fow-card-filter gives me:
called super() on a method not installed declaratively (has no .nom property)

Answer 1

Eventually I found out that importing the whole elements.html file was wrong.
<link rel="import" href="../../elements/elements.html">
Replacing it with only the parent element solved my problem:
<link rel="import" href="../../elements/fow-filter/fow-filter.html">