<my-clock></my-clock>

class MyClockElement extends HyperHTMLElement {

    created() {
        this.attachShadow({mode: 'open'});
        this.render();
        setInterval(() => this.render(), 1000);
    }

    render() {
        const {html} = this;
        return html`
            <div>
				<style scoped>
					:host {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);

						display: inline-block;
						padding: .5em 1em;

						background-color: #5180e9;
						color: #fff;

						font-size: 2.3em;
						font-weight: bold;
						font-family: Helvetica, "Arial", sans-serif;
					}
				</style>
                ${new Date().toLocaleTimeString()}
            </div>
        `;
    }
}

MyClockElement.define('my-clock');
// Now you can use <my-clock></my-clock> in your html
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.5.0/document-register-element.js
  2. https://cdn.jsdelivr.net/npm/hyperhtml-element@1.3.0/es5.min.js