DOM & HTML Output

TemplateResult is the source of truth. Use string or DOM projections only at system boundaries.

HTML string boundary

Use render(view) when an integration expects an HTML string.

import { render } from '@zoxon/mater'

const htmlString = render(<Button label="Save" />)

DOM projections

Use DOM projections only in browser boundaries that need real nodes.

const view = <Button label="Save" />

view.html    // SafeHtml, memoized
view.dom     // fresh DocumentFragment
view.element // fresh Element, requires one root element

Server-side string rendering

On the server, keep the output as a string. Call render(view), then place the string into your HTTP response, template shell, or static file writer.

import { render } from '@zoxon/mater'
import { Button } from '@zoxon/lui/components/index.js'

const view = <Button label="Save" />
const htmlString = render(view)

return `<!doctype html><body>${htmlString}</body>`

Router boundary pattern

The docs app parses the rendered string and swaps nodes at the route boundary.

const doc = parser.parseFromString(render(renderFn()), 'text/html')
contentEl.replaceChildren(...Array.from(doc.body.childNodes))