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

2.11.1 • Published 3 years ago

Install

Weekly downloads

1

License

MIT

Repository

Last release

3 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

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

6 years ago

6 years ago

6 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

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

8 years ago

8 years ago

8 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