<literal-include>

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>

Attributes

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.

Literal templates

Built by Stephen Band for Cruncher logo Cruncher.

Documentation set in Euclid and Martian Mono. Fonts used for documentation not included as part of the license covering the use of Literal.