Extending an element and adding an attribute
Test to extend and element and add additional attributes. The second component takes an additional attribute, but doesn't declare the parent attribute in `attributes=`
by jamstooks
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/platform.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/polymer.js"></script>
<polymer-element
name="test-parent-component"
attributes="firstparam">
<template>
<div>
All params: {{allParams}}
</div>
</template>
</polymer-element>
<polymer-element
name="test-child-component"
attributes="secondparam"
extends="test-parent-component">
</polymer-element>
<h1>Parent:</h1>
<test-parent-component firstparam="p"></test-parent-component>
<h1>Child:</h1>
<test-child-component firstparam="p" secondparam='c'></test-child-component>
JavaScript
/*
The second component takes an additional attribute,
but doesn't declare the parent attribute in `attributes=`
*/
Polymer('test-parent-component', {
ready: function() {
this.allParams = ""
},
firstparamChanged: function() {
this.getParams();
},
getParams: function() {
this.allParams = this.firstparam;
}
});
Polymer('test-child-component', {
secondparamChanged: function() {
this.getParams();
},
getParams: function() {
this.super();
this.allParams += this.secondparam;
}
});