v148 · DOM · HTML insertion

Streaming Template Engine

A live template renderer using Chrome 148's renewed insertion methods. Edit the template on the left, see setHTMLUnsafe() update the preview in real time. Toggle sanitization and benchmark all three insertion APIs head-to-head.

Chrome 148 ships setHTMLUnsafe(), getHTML(), and improvements to innerHTML parsing. setHTMLUnsafe() is faster than innerHTML for re-renders because it bypasses some legacy parsing overhead and integrates with the declarative shadow DOM pipeline.

Live template editor

Use {{variable}} for substitutions, {#if condition}/{/if} for conditionals, {#each items}/{/each} for loops (items = comma-separated list).

Template variables

Insertion method:

Template source

setHTMLUnsafe()

Live preview

live

Benchmark: 1,000 updates

Renders the template 1,000 times using each insertion method and measures total time. Run on the same template + variables above.

Performance comparison

Ready
setHTMLUnsafe()
—
ms total
innerHTML =
—
ms total
DOM API
—
ms total

The insertion methods

// 1. setHTMLUnsafe() — fast re-render, no sanitization (trust your template)
element.setHTMLUnsafe(htmlString);

// 2. setHTML() — sanitized insertion (removes script, dangerous attrs)
element.setHTML(htmlString, {
  sanitizer: new Sanitizer({
    allowElements: ['p', 'h1', 'h2', 'ul', 'li', 'article', 'header', 'section', 'span'],
    allowAttributes: { '*': ['style', 'class'] }
  })
});

// 3. getHTML() — serialize the DOM back to a string (new in Chrome 148)
const html = element.getHTML();          // includes shadow DOM
const outer = element.getHTML({ serializableShadowRoots: true });

// 4. streamHTMLUnsafe() — stream-write HTML into the element
const sink = element.streamHTMLUnsafe();
const stream = new ReadableStream({ start(c) { c.enqueue(html); c.close(); } });
await stream.pipeThrough(new TextDecoderStream()).pipeTo(sink);

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗