Here's a simple countdown element in Polymer 3:
<html>
<body>
<script type="module">
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module'
class CountdownElement extends PolymerElement {
static get properties () { return {counter: Number} }
ready () {
super.ready()
this.counter = 1000;
this.updateCounter()
}
updateCounter () {
this.counter -= 1;
setTimeout(() => this.updateCounter(), 1000)
}
static get template () { return html`<div>Countdown: [[counter]]</div>` }
}
customElements.define('countdown-element', CountdownElement)
</script>
<countdown-element></countdown-element>
</body>
</html>
This example works without polyfills in Chrome and Firefox, you can try this in CodePen.
(This is also useful for building an ordinary clock by using clock
instead of counter
and setting it in updateClock()
with e.g. this.clock = new Date().toLocaleTimeString()
– but you need a countdown clock instead and seem to have existing logic for calculating the remaining time until the event already.)