html

Template literal function that creates reactive DOM elements with automatic updates.

Signature

function html(template: TemplateStringsArray, ...values: TemplateValue[]): Node;

Parameters

• template: TemplateStringsArray - Template string array from template literal

• ...values: TemplateValue[] - Interpolated values in the template

Returns

• Node - A DOM node containing the rendered elements

Type Definition

type PrimitiveValue = string | number | boolean;
type TemplateValue =
  | PrimitiveValue
  | Node
  | Signal
  | ((e: Event) => void)
  | (() => TemplateValue);

Example

const [title, setTitle] = createSignal("Hello World!");

const template = html`
  <div class="container">
    <h1>${title}</h1>
    <button onclick="${() => setTitle("Lorem ipsum dolor sit amet...")}">
      Set Title
    </button>
  </div>
`;

document.body.appendChild(template);

Advanced Usage

Idioms and Patterns: Advanced Template Features

function Header() {
  return html`<header><h1>Hello World!</h1></header>`;
}

function Footer() {
  return html`<footer>All Rights Reserved ©</footer>`;
}

// Nested components
function App() {
  return html`
    <div>
      ${Header()}
      <main>Lorem ipsum dolor sit amet...</main>
      ${Footer()}
    </div>
  `;
}

document.body.appendChild(App());

Binding Types

The html function supports different types of bindings:

1. Text Binding

2. Attribute Binding

3. Property Binding

4. Event Binding

Performance Notes

• Templates are cached using WeakMap for efficient re-use

• Only binding values are updated when signals change, not the entire template

• Direct DOM manipulation for optimal performance

• No Virtual DOM overhead