@dnajs/custom-elements-v1
v2.11.1
Published
Evolution-based components with Custom Elements v1 implementation.
Downloads
87
Readme
Evolution-based components.
Documentation | Issue tracker | Project home page | Author home page
Install
$ npm i @dnajs/custom-elements-v1 --saveUsage
DNA is built on the top of Custom Elements v1 specs, so it is 100% compatible with the CustomElementsRegistry interface. Simply define the component and register it using customElements.define:
import { prop, BaseComponent, IDOM } from '@dnajs/custom-elements-v1';
class MyElem extends BaseComponent {
static get observedAttributes() {
return ['message']
}
get properties() {
return {
helloMessage: prop.STRING.attribute('message'),
};
}
get template() {
return IDOM.h('span', this.helloMessage);
}
connectedCallback() {
super.connectedCallback();
this.helloMessage = 'Hi!';
}
}
customElements.define('my-elem', MyElem);
// RENDER
document.body.appendChild(new MyElem());<!-- result -->
<body>
<my-elem message="Hi!">
<span>Hi!</span>
</my-elem>
</body>More: