Making Lit Components Morphable

class MorphableElement extends LitElement {
  constructor () {
    super()
    this.initialProperties = new Map()

    // Try to get the initial properties, but wait for any "subclasses" to finish their constructors.
    queueMicrotask(() => {
      // this.elementProperties is the final `Map` of both `static properties = {}` and `@property()` decorator.
      this.elementProperties.forEach((obj, prop) => {
        if (obj.reflect && this[prop] != null) {
          this.initialReflectedProperties.set(prop, this[prop]);
        }
      })
    })
  }

  willUpdate (changedProperties) {
    // Let willUpdate run first, just in case anything fixes the value first.
    super.willUpdate(changedProperties)

    this.initialReflectedProperties.forEach((value, prop) => {
      // If a prop changes to `null`, we assume this happens via an attribute changing to `null`.
      // We could do this in the `attributeChangedCallback`, but by doing it in `willUpdate` we get batched updates, and we dont need to read the "attribute" key. It is technically "wrong", but I *think* its fine.
      if (changedProperties.has(prop) && self[prop] == null) {
        self[prop] = value;
      }
    });
  }
}

class MorphableElement extends LitElement {
  #hasRecordedInitialProperties
  constructor () {
    super()

    // Store the constructor value of all `static properties = {}`
    this.initialReflectedProperties = new Map();
    this.#hasRecordedInitialProperties = false
  }

  attributeChangedCallback(...args) {
    // Only run this the first time attributeChangedCallback is called. It runs just *after* all constructors, but before Lit has coerced any of our properties.
    if (!this.#hasRecordedInitialProperties) {
      this.constructor.elementProperties.forEach((obj, prop) => {
        if (obj.reflect && this[prop] != null) {
          this.initialReflectedProperties.set(prop, this[prop]);
        }
      })

      this.#hasRecordedInitialProperties = true
    }
    super.attributeChangedCallback(...args)
  }

  willUpdate(changedProperties) {
    // Make sure willUpdate runs first in case it does any coercion or fixing of null-ish values.
    super.willUpdate(changedProperties);

    this.initialReflectedProperties.forEach((value, prop) => {
      // If a prop changes to `null`, we assume this happens via an attribute changing to `null`.
      if (changedProperties.has(prop) && this[prop] == null) {
        this[prop] = value;
      }
    });
  }
}