DNAProgressive Web Components

Unleash the power of Custom Elements through declarative API, customized built-in elements and shadow-free composition.

Customized built-in elements

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

Properties, states and attributes

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

Slots

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>.

Listeners and async events

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

Cross-framework compatibility

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

Storybook and documentation

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

BestCodingAppEver