Published
Edited
Sep 14, 2019
md`# Hello, X-Tag!
(Although it's a bit tragic that there's no way to unregister a registered web-component...)
`
{
xtag.create('x-clock', class extends XTagElement {
connectedCallback () {
this.start();
}
start (){
this.update();
this._interval = setInterval(() => this.update(), 1000);
}
stop (){
this._interval = clearInterval(this._data.interval);
}
update (){
this.textContent = new Date().toLocaleTimeString();
}
'tap::event' (){
if (this._interval) this.stop();
else this.start();
}
})
return html`
<style>
x-clock {
display: table;
min-height: 1em;
margin: 0 auto 1em;
font-size: 2em;
line-height: 1em;
color: #aad4ef;
font-family: monospace;
cursor: pointer;
}
</style>
<x-clock/>
`
}
xtag.re
xtag = xtaglib.xtag
XTagElement = xtaglib.XTagElement
xtaglib = require('https://bundle.run/x-tag@2.0.3-beta')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
