A literal-html
template may be placed anywhere in your HTML. It is designed to
make it easy to mix islands of dynamically rendered content into static content.
A literal-html
template is replaced by its own rendered content.
<template is="literal-html">
<pre>${ 'hello' }</pre>
</template>
${ 'hello' }
Where JS fails a literal-html
template is left inert and unrendered.
<template is="literal-html">
<pre>${ throws an error }</pre>
</template>
The template’s data
object may be set with the data
attribute. A data
attribute that parses as a URL imports a JavaScript module or fetches JSON:
<template is="literal-html" data="../data/clock.js">
<pre>${ data.time.toFixed(0) + 's' }</pre>
</template>
${ data.time.toFixed(0) + 's' }
The template scope contains a number of helper functions. The
include(src, data)
function includes other templates:
<template id="todo-li">
<li>${ data.text }</li>
</template>
<template is="literal-html">
<h5>Todo list</h5>
<ul>${ include('#todo-li', { text: 'Wake up' }) }</ul>
</template>
The include(src, data)
function is partially applicable, helpful for
mapping an array of objects to template includes:
<template is="literal-html" data="../data/todo.json">
<h5>Todo list</h5>
<ul>${ data.tasks.map(include('#todo-li')) }</ul>
</template>
data
A path to a JSON file or JS module exporting data to be rendered.
<template is="literal-html" data="./data.json">...</template>
<template is="literal-html" data="./module.js">...</template>
Named exports are supported via the hash:
<template is="literal-html" data="./module.js#namedExport">...</template>
Paths may be rewritten. This helps when JS modules are bundled into a single module for production.
import { urls } from '../documentation/templates/literal.js';
urls({
'../documentation/templates/path/to/module.js': '../documentation/templates/path/to/production/bundle.js#namedExport'
});
The data
attribute also accepts raw JSON:
<template is="literal-html" data='{"property": "value"}'>...</template>
Built by Stephen Band for
Cruncher.
Documentation set in Euclid
and Martian Mono. Fonts
used for documentation not included as part of the license covering the
use of Literal
.