Literal 0.6.5

<template is="literal-element">

An HTML template that declares a custom element. Its tag attribute, required, declares the tag name of new custom element, and the content of the template defines its 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:

Attributes

tag

Defines the tag name of a new custom element.

<template is="literal-element" tag="play-list">

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

attributes

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

<template is="literal-element" attributes="previous next" tag="play-list">

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:

<template is="literal-element" attributes="loop:boolean controls:tokens" tag="play-list">

Possible attribute types are:

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

<template is="literal-element" tag="play-list" 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 may be an object of lifecycle callbacks, while any named exports are imported into the template scope.

<template is="literal-element" tag="my-elem" src="./path/to/module.js">
    From the module's named exports: ${ text }
</template>

And in module.js:

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

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

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.