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

Customized built-in elements