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:
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:
:boolean
– a boolean attribute, boolean property:number
– a string attribute, number property:string
– a string attribute, string property:tokens
– a string attribute, TokenList property:src
– a string attribute, object propertyAttribute 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';
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
.