A literal-include
may be placed pretty much anywhere in your HTML, enabling
the insertion of chunks of dynamic, JS-rendered DOM wherever you like in a
document.
A literal-include
finds a source template identified by its src
attribute,
fetches JSON or imports a module referred to by its data
attribute, renders
attributes and text found to contain literal tags, then replaces itself with
the rendered result.
A literal-include
may contain fallback content, in case any of that fails.
<template id="greetings">
Hello ${ data.name }.
</template>
<literal-include src="#greetings" data="/users/1.json">
Hello you!
</literal-include>
Multiple data-
attributes may be declared, their values become properties of
the data
object inside the template:
<literal-include src="#add-to-collections-thumb" data-pk="34" ... ></literal-include>
Or a single data
attribute can be used to pass JSON to use as the data
object inside the template:
<literal-include src="#add-to-collections-thumb" data='{"pk":34, ... }'></literal-include>
Both data
and data-
attributes also accept URLs. A URL is used to fetch a
.json file…
<literal-include src="#greetings" data="/users/1.json"></literal-include>
…or import the default export of a .js module:
<literal-include src="#greetings" data="/user-module.js"></literal-include>
data
A path to a JSON file or JS module exporting data to be rendered.
<literal-include src="#template" data="./data.json"></literal-include>
<literal-include src="#template" data="./module.js"></literal-include>
Named exports are supported via the path hash:
<literal-include src="#template" data="./module.js#namedExport"></literal-include>
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:
<literal-include src="#template" data='{"property": "value"}'></literal-include>
src
Define a source template whose rendered content replaces this
<literal-include>
. This is a required attribute and must be in
the form of a fragment identifier pointing to a template
element
in the DOM.
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
.