dom

Short description

Installation

Install with npm i --save @amatiasq/dom.

Usage

import { dom } from '@amatiasq/dom';

Render HTML to DOM elements

> const div = dom`<div id="superpotato">`;
<div id="superpotato"></div>

Escape HTML strings

> const myVar = '<div />';
> const span = dom`<span>${myVar}</span>`;
<span>$lt;div /&gt;</span>

Embed DOM element into the template

> const container = dom`<div class="container">${div}<br>${span}</div>`;
<div class="container">
  <div id="superpotato"></div>
  <br>
  <span>$lt;div /&gt;</span>
</div>

Thee embeded elements are not cloned. It's the same reference.

> div.classList.add('testing')
> container.querySelector('#superpotato').classList.has('testing')
true

Unescaped HTML embeding

> const unsafe = dom`<div>${{ __html__: '<i></i>' }}</div>`;
<div><i></i></div>

Lists

An array of valid values is also accepted. Values are joint with a space.

> dom`<div class="${['active', 'selected']}">${['<random>']}</div>`
<div class="active selected">&lt;random&gt;</div>