dominate

Declarative DOM building

Install

Download the CJS, ESM, UMD versions or install via NPM:

npm install @ryanmorr/dominate

Usage

Import the library:

import dominate from '@ryanmorr/dominate';

Convert a single element HTML string into a DOM element:

const div = dominate`<div></div>`;

Convert multiple elements into a document fragment:

const fragment = dominate`<div></div><span></span>`;

Convert plain text to a DOM text node:

const text = dominate`This is plain text.`;

Supports self-closing and auto-closing tags:

const div = dominate`<div />`;
const span = dominate`<span><//>`;

Set attributes:

const div = dominate`<div id="foo" class=${'bar'} />`;

Set the class with an array or object:

const div = dominate`<div class=${['foo', 'bar', 'baz']}></div>`;
const span = dominate`<span class=${{foo: true, bar: false, baz: true}}></span>`;

Set CSS styles as a string or an object:

const div = dominate`<div style=${{width: '100px', height: '100px'}}></div>`;
const span = dominate`<span style=${'color: red; position: static;'}></span>`;

Add event listeners:

const div = dominate`<div onclick=${(e) => console.log('clicked!')}></div>`;

Inject DOM nodes:

const div = dominate`<div>${dominate`<span />`}</div>`;

Supports SVG elements:

const rect = dominate`<rect x="10" y="10" width="100" height="100"/>`;

Supports functional components:

const Component = (attributes, children) => {
    return dominate`<div ...${attributes}>${children}</div>`
};

const div = dominate`<${Component} id="foo">bar<//>`;

Can return multiple element references via the ref attribute:

const { foo, bar, baz } = dominate`
    <div ref="foo">
        <span ref="bar"></span>
        <em ref="baz"></em>
    </div>
`;

License

This project is dedicated to the public domain as described by the Unlicense.