title: Uncaught TypeError: Cannot set property 'value' of null with custom element
body: <p>I created a web component and i gave it a method.. When the button is pressed I want the method to show "Hello" but its not working at all, I'm getting the following error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property 'value' of null</p>
  </blockquote>
  
  <p>I would like to know why is this happening and how I can fix this?</p>
  
  <p>My JS code:</p>
  
  <pre><code>var WC = Object.create(HTMLElement.prototype);
  
  WC.hi= function() {
      document.getElementById("w-c").value = "Hello!";
  };
  
  var WCR = document.registerElement("w-c", {
      prototype: WC, 
      extends:'input'
  });
  
  var wc = new WCR();
  
  var division = document.getElementById('sh');
  var root = division.createShadowRoot();
  root.appendChild(wc);
  
  WC.setDimensions = function() {
      Object.defineProperty(WC, 'height', {value: 1000});
  };
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
              &lt;h2&gt;WEB COMPONENT&lt;/h2&gt;
                  &lt;div id="sh"&gt; &lt;/div&gt;
          &lt;script src="webcomponent.js"&gt; &lt;/script&gt;
              &lt;button onclick="wc.hi()"&gt;
                      Say hi&lt;/button&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>