title: Creating a custom input field with Web Components without outside accessability
body: <p>I want to create a custom input with the Shadow DOM</p>
  
  <pre><code>class TextBox extends HTMLElement {
  
    constructor() {
      super();
      var shadow = this.attachShadow({ mode: 'open' });
  
      let textbox = document.createElement("input");
      shadow.appendChild(textbox);
      textbox.addEventListener("change", validate);
  
      function validate(event) {
        console.log("input can be validated");
      }
    }
    get value() {
      console.log("get");
      let textbox = this.shadowRoot.querySelector("input");
      return textbox.value;
    }
    set value(newValue) {
      console.log("set");
      let textbox = this.shadowRoot.querySelector("input");
      textbox.value = newValue;
    }
  }
  customElements.define('test-textbox', TextBox);
  </code></pre>
  
  <p>It should be possible to change the value of the displayed textbox via js. If I change the <code>.value</code> property of the textbox the setter of value don't get called? Am i missing something?</p>
  
  <p>Later on I want to include the textbox via a template in my solution and be able to set the value of the textbox via <code>textbox.value ="Peter"</code></p>