polymer Polymer Cheat Sheet Extending an element
Example
Docs: extending elements, inherited templates.
Instead of Polymer.Element, a custom element can extend a different element:
class ParentElement extends Polymer.Element {
/* ... */
}
class ChildElement extends ParentElement {
/* ... */
}
To change or add to the parent's template, override the template getter:
<dom-module id="child-element">
<template>
<style> /* ... */ </style>
<span>bonus!</span>
</template>
<script>
var childTemplate;
var childTemplate = Polymer.DomModule.import('child-element', 'template');
var parentTemplate = ParentElement.template.cloneNode(true);
// Or however you want to assemble these.
childTemplate.content.insertBefore(parentTemplate.firstChild, parentTemplate);
class ChildElement extends ParentElement {
static get is() { return 'child-element'; }
// Note: the more work you do here, the slower your element is to
// boot up. You should probably do the template assembling once, in a
// static method outside your class (like above).
static get template() {
return childTemplate;
}
}
customElements.define(ChildElement.is, ChildElement);
</script>
</dom-module>
If you don't know the parent class, you can also use:
class ChildElement extends customElements.get('parent-element') {
/* ... */
}
