Literal 0.6.2

<template is="literal-element">

An HTML template that declares a new custom element. Its tag attribute, which is required, declares the tag name of the new custom element, and the content of the template defines the shadow DOM:

<template is="literal-element" tag="dom-clock">
    <time>${ clock(1).map(floor) } seconds</time>
</template>

Here the expression ${ clock(1) } is a stream of times that emits a new time every 1 second (template scope contains a small library of functions that help do this sort of thing). The declared element may now be written:

<p>Current time: <dom-clock></dom-clock></p>

Current time:

Now for the sake of argument, let’s say we want to give <dom-clock> an interval attribute, and make it available as a number inside the template scope:

<template is="literal-element" tag="dom-clock" attributes="interval:number">
    <time>${ clock(data.interval).map(floor) } seconds</time>
</template>

That may now be authored:

<p>Current time: <dom-clock interval="3"></dom-clock></p>

Current time:

The new custom element may be made to load stylesheets before it is upgraded, preventing a flash of unstyled content, using the stylesheets attribute, and it may have a lifecycle and scope variables defined in a JS module declared via the src attribute.

Attributes

tag

Defines the tag name of a new custom element.

tag="my-player"

Being a custom element definition, clearly the name must conform to the rules for custom element names (ie. must contain a dash).

attributes

Defines attributes of the new custom element as a list of names:

attributes="previous next"

Attributes may be given a type. A typed attribute defines both an attribute and a property of the new custom element. The type defines the behaviour of the attribute and type of value of the property:

attributes="loop:boolean controls:tokens"

Possible types are:

Attribute values are available inside the template scope as properties of data:

<template is="literal-element" tag="my-carousel" attributes="loop:boolean controls:tokens">
    <p>Looping is ${ data.loop ? 'on' : 'off' }.</p>
    <p>Play button is ${ data.controls.includes('play') ? 'shown' : 'hidden' }.</p>
</template>

src

Imports a JS module. The module’s default export is the element’s lifecycle, and its named exports are added to the template scope.

<template is="literal-element" tag="..." src="./path/to/module.js">

And in module.js:

// Export lifecycle
export default {
    construct: function() { ... },
    connect:   function() { ... }
}

// Export scope variables
export const text = 'I say what';

stylesheets

A list of stylesheets urls. They are loaded before the element is defined, preventing a flash of unstyled content.

<template is="literal-element" tag="..." stylesheets="./path/to/style1.css ./path/to/style2.css">

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.