@dnajs/custom-elements-v1 NPM | npm.io

2.11.1 • Published 4 years ago

Install

Weekly downloads

1

License

MIT

Repository

Last release

4 years ago

Evolution-based components.

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

Install

$ 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:

DNA components Chialab webcomponents

@dnajs/core @dnajs/idom

@infinitebrahmanuniverse/nolb-_dn @everything-registry/sub-chunk-248 @dnajs/mutation

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago