Progressive Web Components
Unleash the power of Custom Elements through a declarative definition API, builtin elements extension and a simpler composition mechanism.
DNA simplifies and encourages the use of customized built-in elements, which inherit methods and properties from standard HTML, preserving usability and accessibility features.
DNA offers @property and @state decorators for adding reactivity to a component's class fields, ensuring that any changes are reflected in the component's template. These properties and states can be monitored, synchronized with attributes, and trigger change events.
DNA uses Quantum instead of ShadowDOM to render slotted children, simplifying the usage of custom elements inside forms and providing a more flexible management of slotted contents. Unlike ShadowDOM, Quantum also works for built-in elements, allowing you to use <slot> even inside buttons
DNA uses event delegation for listening to events from a component's elements or slotted contents, offering the @listen decorator to streamline the process. Events can be asynchronous and dispatched from the component's class.
DNA components works seamlessly with any framework or library, thanks to the use of standard Web Components APIs, Quantum and Plasma, which can generate flavor specific 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.
