connect input from appended customComponent to object-CodePudding

I'm appending custom-components per key:value pair of objects. Now I'd like to pass the new value onChange to the object. And I'd need the functions to be reusable.

I've been fiddling around with this for a while (a long while) to make it somehow display the props, but I assume I have set it up wrong. The object is not really connected to the created elements. It should finally display settings for SVG-elements, that's why I tried with key:value I extract there via getters for the moment) I'm actually out of charge:

main.js

window.onload = () => {

        let testObj = {
            id: 'SVG0',
            x1: '90',
            y1: '90',
            x2: '246',
            y2: '246'
        }
        let pair;
        class SettingsTest extends HTMLElement {

            connectedCallback() {
                let key = pair.k;
                let value = pair.v;

                this.innerHTML =
                    `<div  style="margin-bottom: 30px; width: 100px">
                    <div>
                        <label  data-shrink="true">${key}</label>
                        <div >
                            <input aria-invalid="false" type="text"  value=${value}>
                        </div>
                    </div>
                </div>`
            }
        };
        customElements.define('settings-test', SettingsTest);

        function appendComponents(obj, tag, parent) {
            const p = document.getElementById(parent);
            p.replaceChildren()

            Object.keys(obj).forEach((key, index) => {

                pair = { k: [ key ], v: obj[ key ] }
                newEl = document.createElement(tag);
                newEl.setAttribute('id', `prop${index}`);
                p.appendChild(newEl);

                return pair;
            })

        };
       appendComponents(testObj, 'settings-test', 'container') 
       }

input {
    margin-top: 0px;
    background: none;
    font-size: 18px;
    color:#a5bae3;
    height: 50px;
    border: none;
    border-bottom:1px solid #a5bae3;
    width: 90%;
    align-items:baseline;
    height: 25px;
    margin-left:5px;
  }
 *:focus {
    outline: none;
    color:blue
 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <link rel="stylesheet" href="styles.css">
    <title>Test Input FROM CUSTOM</title>
     <script src="main.js"></script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

CodePudding user response：

You are abusing your global variable pair to set content inside your component. This works in simple code; but will blow up in your face in real applications.

Key with Web Components is: You communicate data with attributes or properties (or Events)

Here is your code, simplified, to show the concept

let testObj = {
  id: 'SVG0',
  x1: '90',
  y1: '90',
  x2: '246',
  y2: '246'
}

customElements.define('settings-test', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<br>key:${this.getAttribute("key")} value: ${this.value}`;
  }
});

let tags = Object.entries(testObj).map(([key,value], index) => {
  newEl = document.createElement("settings-test");
  newEl.setAttribute('id', `prop${index}`);
  newEl.setAttribute('key', key); // attribute
  newEl.value = value; // property
  return newEl;
});

document.body.append(...tags);