@dnajs/custom-elements-v1

2.11.1 • 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:

Dependencies (2)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @dnajs/custom-elements-v1

    Weekly Downloads

    1

    Version

    2.11.1

    License

    MIT

    Unpacked Size

    318 kB

    Total Files

    15

    Last publish

    Collaborators

    • dnajs
    • chialab-admin