シンプル時計 (Web Components)

シンプルな時計を Web Components で作ります。

デモ

コード

HTML

<style>
my-clock {
  color: blue;
}
</style>

<my-clock></my-clock>

JavaScript

customElements.define('my-clock',
  class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = `
<style>
:host {
  display: block;
  contain: content;
  font-size: 2em;
  font-weight: bold;
  font-family: monospace;
  background-color: #aaffcc;
  text-align: center;
}
</style>
<p id="dateOnScreen"></p>
`;
      this._elmDateOnPage = this.shadowRoot.querySelector('#dateOnScreen');
    }

    connectedCallback() {
      setInterval(() => {
        this._elmDateOnPage.textContent = moment().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    }

})