simple-clock.html

<template id="template">
  <style>
    .container{
      width: 600px;
      height: 100px;
      background-color: blue;
      color: white;
      margin: 0 auto;
    }
    .container.red{
      background-color: red;
    }
    .container.green{
      background-color: green;
    }
    .clock{
      font-family: arial;
      line-height: 100px;
      font-size: 60px;
      text-align: center;
      color: white;
    }
  </style>
    <div class="container">
      <div class = "clock">
          00:00:00
      </div>
    </div>
</template>

<script>
  class SimpleClock extends HTMLElement {
    constructor(args) {
      super();
      console.log("my clock");
      this.shadow = this.attachShadow({mode: "open"});
      this.cacheDom()
    }
    //element dodany do DOM
    cacheDom(){
      const importDocument = document.currentScript.ownerDocument,
      // template = importDocument.querySelector("template").content.cloneNode(true);
      template = importDocument.getElementById("template").content.cloneNode(true);
      this.shadow.appendChild(template);
      this.$container = this.shadow.querySelector(".container");
      this.$clock = this.shadow.querySelector(".clock");
    }
    static get observedAttributes() {return ["theme"]};
    connectedCallback(){
      this.runClock();
    }
    runClock(){
      setInterval(() => {
        this.refreshClock();
      }, 1000);
    }
    refreshClock(){
      let date = new Date;
       let timeNow = date.toLocaleTimeString();
      this.setClock(timeNow)
    }
    setClock(time){
      this.$clock.innerHTML = time;
    }
    updateTheme(newValue){
      this.$container.className = "container " + newValue;
    }
    attributeChangedCallback(attribute, oldValue, newValue){
      console.log("attribute old new", attribute, oldValue, newValue)
      if(oldValue && attribute === "theme"){
        this.updateTheme(newValue)
      }
    }
  }
  window.customElements.define("simple-clock", SimpleClock)
</script>