Literal enhances the <template>
element with JS literal expressions
and incremental DOM rendering in reaction to changes in a signal graph.
<template is="literal-html">
documentation- Scope and expressions in Literal templates
- Repository on github.com
A literal-html
template is replaced in the DOM with its own rendered content.
HTML <template>
s are allowed pretty much anywhere in a document, so
literal-html
templates enable you to freely mix islands of dynamically
rendered content into your HTML.
Import literal-html/element.js
to start rendering literal-html
templates:
<script type="module" src="./build/literal-html/element.js"></script>
Every Literal template has a data
object. In this example the default export
of clock.js
is imported as data
and its time
property rendered:
<template is="literal-html" src="./build/data/clock.js">
<p>${ data.time.toFixed(0) } seconds since page load.</p>
</template>
${ data.time.toFixed(0) } seconds since page load.
When no data is explicitly imported Literal renders the template with an
empty data
object. In this example data
is not used, and the template
renders a stream of pointer events:
<template is="literal-html">
<p>${ events('pointermove', body).map((e) => round(e.pageX)) }px</p>
</template>
${ events('pointermove', body).map((e) => round(e.pageX)) }px
Templates can include()
other templates. Here, data
is imported from a JSON
file and an array of tasks is mapped to a collection of <li>
s:
<template id="li-template">
<li>${ data.text }</li>
</template>
<template is="literal-html" src="./data/todo.json">
<ul>${ data.tasks.map(include('#li-template')) }</ul>
</template>
- ${ data.tasks.map(include('#li-template')) }
- Read more about
literal-html
templates - Read more about Literal template expressions