index.html

<script>
  class MyArray extends HTMLElement {
            constructor() {
                super();
                this.store = {};
                const template = document.createElement("template");
                const id = Math.random().toString(36).substr(2, 9);
                template.innerHTML = `<div id="input-${id}">hi</div>`;
                this.shadow = this.attachShadow({ mode: "open" });
                this.shadow.appendChild(template.content.cloneNode(true));
                this.input = this.shadow.getElementById("input-" + id);
                this.initialized = false;
            }

            static get observedAttributes() {
                return ['value'];
            }
            static get formAssociated() { return true; }

            attributeChangedCallback(name, oldValue, newValue) {
                this.store = newValue;
                this.ar = JSON.parse(this.getAttribute("value"));

                if (!this.initialized) {
                    this.initialized = true;
                    for (let k in this.ar) {
                        const lid = Math.random().toString(36).substr(2, 9);
                        const el = document.createElement(`input`);
                        el.setAttribute("id", `input-${lid}`);
                        el.setAttribute("type", "text");
                        el.setAttribute("value", this.ar[k].Value);
                        const _this = this;
                        el.onkeyup = () => {
                            _this.ar[k].Value = el.value;
                            console.log('ar', _this.ar);
                            const ev = new CustomEvent("change", { detail: { ar: _this.ar } })
                            this.dispatchEvent(ev);
                        };
                        this.input.appendChild(el);
                    }
                }
            }
        }

        customElements.define('my-array', MyArray);

    </script>



    <div data-store="{ ar: [ { Key: 'kv1', Value: 'one'}, { Key: 'kv2', Value: 'Two'}]}">
        <my-array data-bind-value="$ar" data-on-change="$ar=event.detail.ar;console.log('asd', $ar)"></my-array>
    </div>
    <div data-text="JSON.stringify($ar)"></div>