DNA • Progressive Web Components

DNA aims to unleash the power of Custom Elements through declarative API, customized built-in elements and a shadow-free composition.

DNA makes it easy to create customized built-in elements that inherit HTML behavior, preserving usability and accessibility.

With @property and @state decorators, DNA adds reactivity to class fields, syncing with attributes and triggering updates on change.

DNA renders slotted content via a custom light DOM engine —no Shadow DOM— ensuring form compatibility and allowing <slot> inside built-in elements like <button>.

Use the @listen decorator for delegated event handling, even for slotted content. Events can be async and dispatched from within the class.

Built with standard Web Components APIs, DNA works with any framework. Plasma can generate wrappers for React, Vue, Svelte, and Angular.

The DNA tools ecosystem includes a Storybook preset for Web Components, which automatically generates documentation and controls for your components.

Install via NPM:

npm i @chialab/dna

yarn add @chialab/dna

import { Component, customElement, listen, property } from '@chialab/dna';

@customElement('hello-world')
class HelloWorld extends Component {
    // define an observed property
    @property() name: string = '';

    render() {
        return (
            <>
                <input
                    name="firstName"
                    value={this.name}
                />
                <h1>Hello {this.name || 'World'}!</h1>
            </>
        );
    }

    // delegate an event
    @listen('change', 'input[name="firstName"]')
    private onChange(event: Event, target: HTMLInputElement) {
        this.name = target.value;
    }
}

Then use the element in your HTML:

<hello-world></hello-world>

Install the dependencies and run the build script:

yarn install

yarn build

This will generate the bundles in the dist folder, as well as the declaration files.

Run the test script:

yarn test

DNA is released under the MIT license.