order of CE methods

by Danny Engelman

HTML

<script>
  const colors = {
    log: "purple;font-size:15px",
    note: "crimson",
    A: "green;margin-left:1em",
    B: "royalblue;margin-left:1em",
    C: "olive;margin-left:1.5em",
    D: "brown;margin-left:2em"
  };
  let elementCount = 0;
  const log = (...args) => {
    let div = document.body.appendChild(document.createElement('DIV'));
    div.style = `color:white;background:${args.shift()}`;
    div.append(args.join(" "));
  }
  const isConnected = el => " - this.isConnected:" + (el.isConnected ? "TRUE" : "FALSE");
  const id = (x) => x.nodeName.split `-` [1];
  const query = x => document.querySelector(x);

  log(colors.log, "START");
  class MYELEMENT extends HTMLElement {
    log() {
      log(`${colors[id(this)]}`, this.nodeName, ...arguments);
    }
    static get observedAttributes() {
      // runs once for each class/element 'this' is NOT the element!
      let attr = ["a1", "a2"] 
      let letter = 'ABCD'.split `` [elementCount++];
      log(colors[letter], 'observedAttributes',letter,':',attr);
      return attr;
    }
    constructor() {
      super();
      log(`${colors[id(this)]||"red"}`, `${this.nodeName} - constructor`);
    }
    connectedCallback() {
      this.log("connectedCallback", isConnected(this)); //FireFox difference!
      log(colors.note, this.nodeName, this.innerHTML ? 'CAN' : 'can NOT', 'access innerHTML in connectedCallback', isConnected(this));
      setTimeout(() => this.log(`⌛setTimeout in connectedCallback`, isConnected(this)), 0);
    }
    attributeChangedCallback(name, oldValue, newValue) { // 4th W3C parameter = Namespace (not implemented in Browsers)
      this.log("attributeChangedCallback:", name, oldValue || "null", newValue, isConnected(this));
    }
    disconnectedCallback() {
      this.log("disconnectedCallback", isConnected(this))
    }
        adoptedCallback() {
      this.log("*** adoptedCallback", isConnected(this))
    }

  }
  log(colors.log, "define customElements");
 ...