Progressive Web Components.

Use in React

Web Components support in React is really poor: you can instantiate nodes with attributes, but you can't give them referenced properties or slotted children. DNA exposes a module that automatically wrap the Custom Element into a React Component, with a full TypeScript support.

First of all, make sure you have DNA installed, as well as the React peer dependency.

$ npm i @chialab/dna react react-dom

Then, you can import the DNA Root component and use it as wrapper for DNA components:


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

@customElement('x-dialog', {
    extends: 'dialog',
class Dialog extends Component {
    static get observedAttributes() {
        return ['title'];

    @property() title = '';

    render() {
        return html`
            <div class="layout-container">
                <div class="layout-header">
                <div class="layout-content">
                    <slot />

declare namespace JSX {
    interface IntrinsicElements {
        'x-dialog': Dialog;


import React from 'react';
import ReactDOM from 'react-dom';
import { Root } from '@chialab/dna/react';
import './dialog';

        <dialog is="x-dialog" title="Hello world!">