ce-example-04.js

const $value = Symbol('value');
const $updating = Symbol('updating');

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['value'];
  }
  
  set value(value) {
    this[$value] = value;
    this.render();
  }
  
  get value() {
    return this[$value];
  }
  
  async render() {
    if (!this[$updating]) {
      this[$updating] = true;

      // Ensure that changes are batched.
      this[$updating] = await false;
      
      this.textContent = `Value: ${this.value}`;
    }
  }
  
  attributeChangedCallback(attr, oldValue, newValue) {
    if (oldValue !== newValue) {
      this[attr] = newValue;
    }
  }  
}

customElements.define('my-element', MyElement);