@dnajs/custom-elements-v1

Evolution-based components with Custom Elements v1 implementation.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
226Jun 12, 2021May 17, 2016Minified + gzip package size for @dnajs/custom-elements-v1 in KB

Readme

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:

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.