DEV Community

loading...

Discussion on: Why I don't use web components

Collapse
zanehannanau profile image
ZaneHannanAU

This is my take on most of the issues... but I threw it up on my phone.

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);

It's very nitpicky on that point though...

Collapse
mst4fa profile image
Mustafa Ozcan

Great point.