Controlled-components-snippet6.js

function myComponent(selector,label,value,onChange,validations = {}){
  let element = document.querySelector(selector);
  element.innerHTML=```
    <div class="my-element">
        <label>${label}</label>
        <input></input>
    </div>
  ```
  let input = element.querySelector('input'); 
  input.value = value;
  if (validations.maxLength) {
    input.maxLength = validations.maxLength;
  } 
  if (validations.pattern){
    input.pattern = pattern;
  }
  input.addEventListener('input',onChange);
}