A simple input character count custom element

readme.md

Useage:

For forced limiting to the maxlength

<input id="my-input" maxlength="100">
<character-count for="my-input"></character-count>

or for just counting the characters - allows for negative count.

<input id="my-input">
<character-count for="my-input" maxlength="100"></character-count>

character-count.js

customElements.define('character-count', class extends HTMLElement {
    #target = null;

    connectedCallback() {
        this.#target = document.getElementById(this.getAttribute('for'));

        if (this.#target) {
            this.#target.addEventListener('input', this);

            this.value = this.#target.value;
        }
    }

    disconnectedCallback() {
        this.removeEventListener('input', this);
    }

    handleEvent(event) {
        if (event.type === 'input') {
            this.value = this.#target.value;
        }
    }

    get maxlength() {
        return this.getAttribute('maxlength') || this.#target.getAttribute('maxlength');
    }

    set value(value) {
        this.textContent = this.maxlength - value.length;
    }
});