Nefarious Pomegranate Magnate
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@dnajs/custom-elements-v1

2.9.8 • Public • Published

Logo

Evolution-based components.

Documentation | Issue tracker | Project home page | Author home page

Install

NPM

$ npm i @dnajs/custom-elements-v1 --save

Usage

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:

Install

npm i @dnajs/custom-elements-v1

DownloadsWeekly Downloads

4

Version

2.9.8

License

MIT

Unpacked Size

167 kB

Total Files

15

Last publish

Collaborators

  • avatar