title: this is defined, but children and querySelector fail for custom element
body: <p>I have a custom element (input-date) inside another custom element (edit-table). When I go to assign the value to the input-date, inside the 'set value' class member function i log:</p>
  
  <pre><code> console.log(this)
  </code></pre>
  
  <p>prints out the element</p>
  
  <pre><code>&lt;input-date id=​"cell" style=​"height:​ 100%;​ width:​ 300px;​"&gt;
    ​&lt;input id=​"input" placeholder=​"mm/​dd/​yyyy, hh:​mm am/​pm" style=​"font-family:​ "Open Sans", sans-serif;​ height:​ 100%;​ width:​ 100%;​ text-align:​ left;​ font-size:​ 18px;​ border:​ 2px;​ border-radius:​ 5px;​ padding:​ 5px;​"&gt;​
  &lt;/input-date&gt;​
  </code></pre>
  
  <p>but when i do</p>
  
  <pre><code> console.log(this.children);
  </code></pre>
  
  <p>and</p>
  
  <pre><code> console.log(this.querySelector('#input'));
  </code></pre>
  
  <p>I get 'null'.</p>
  
  <p>the function with 'this' is inside 'set value' of my input-date class</p>
  
  <pre><code>class InputDate extends HTMLElement
  {
  ...
  connectedCallback()
  {
    var input = document.createElement('Input');
    input.id = 'input';
    this.appendChild(input);
  }
  set value(val)
  {
    //val should be a date object 
    var i = this.querySelector('#input');
    if(i &amp;&amp; val)
    {
      i.value = val.toLocaleString();
    }
    console.log(i,val,this, this.childNodes);
  }
  ...
  customElements.define('input-date',InputDate);
  </code></pre>
  
  <p>note: also if its relevant, my_date.value = some_date; (the part that calls the 'set value' class member function) happens in a completion block from an XMLHTTPRequest to an API.</p>
  
  <p>the input-date is created inside another custom element called edit-table.</p>
  
  <p>so i set the users in 'edit-table'</p>
  
  <pre><code>get_users(function(r)
  {
    if(r.hasOwnProperty('error_message'))
    {
      alert(r.error_message);
    }
    else
    {
      var table   = document.getElementById('edit-table');
      table.users = r.users;  
    }
  });
  </code></pre>
  
  <p>then under 'edit-tables' 'set users', i create an 'input-date' element and try to assign the date from the server, (which is Wed Feb 08 2017 00:00:00 GMT-0500)</p>
  
  <pre><code>class EditUsers extends HTMLElement
  ...
  set users(users)
  {  
    ...
    var check  = document.createElement('input-date');
    check.value = new Date('Wed Feb 08 2017 00:00:00 GMT-0500');
  }
  customElements.define('edit-table',EditTable);
  }
  </code></pre>
  
  <p>any ideas?</p>