擴充套件元素
自定義元素可以擴充套件不同的元素,而不是 Polymer.Element
:
class ParentElement extends Polymer.Element {
/* ... */
}
class ChildElement extends ParentElement {
/* ... */
}
要更改或新增到父模板,請覆蓋 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>
如果你不知道父類,你還可以使用:
class ChildElement extends customElements.get('parent-element') {
/* ... */
}