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.
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:
boolean
– a boolean attribute, boolean propertynumber
– a string attribute, number propertystring
– a string attribute, string propertytokens
– a string attribute, TokenList propertysrc
– a string attribute, object propertyAttribute 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">
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
.