Discussion on: Why I don't use web components

import {$ce} from 'z3util-dom';
class Adder extends HTMLElement {
    connectedCallback() {
        this.createShadowRoot({"mode": "closed"}).append(
            this.#a = $ce('input', {"type": "number"}),
            this.#b = $ce('input', {"type": "number"}),
            this.#p = $ce('p', {})
        );
        this.update();

        this.#a.addEventListener('change', e => {
            this.a = +e.target.value;
        });

        this.#b.addEventListener('change', e => {
            this.b = +e.target.value;
        });
    }

    static observedAttributes = ['a', 'b'];

    get a() { return +this.getAttribute('a'); }

    set a(value) { this.setAttribute('a', value); }

    get b() { return +this.getAttribute('b'); }

    set b(value) { this.setAttribute('b', value); }

    attributeChangedCallback() { this.update(); }

    update() {
        this.#a.value = this.a;
        this.#b.value = this.b;
        this.#raf || (this.#raf = requestAnimationFrame(() => {
            let {a, b} = this;
            this.#p.textContent = `${a} + ${b} = ${a + b}`;
            this.raf = null;
        }))
    }
}

customElements.define('my-adder', Adder);