Controlled-components-snippet4.js

function myComponent(selector,label,value,onChange,validations = {},format=null){
  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;
  input.addEventListener('input', e=>{
    let raw = e.target.value;
    if (validations.maxLength && raw.length > validations.maxLength
      || validations.pattern && validations.pattern.test(raw)){
      // for simplicity we are going to assume input events are cancelable
      e.preventDefault();
    } else {
      if (format) {
        raw = format(raw);
        input.value = raw;
      }   
      onChange(raw);
    }
  });
}