title: custom elements not setting/getting attributes
body: <p>if i create two custom elements and create one of them inside the other one, the attributes are not working on the new childs of the first element.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Bar extends HTMLElement {
    constructor() {
      super();
      const val = this.getAttribute('val') || 'no value';
  
      const shadow = this.attachShadow({mode: 'open'});
      const wrapper = document.createElement('div');
      wrapper.innerHTML = `
        &lt;div class='bar'&gt;
         &lt;span&gt;${val}&lt;/span&gt;
        &lt;/div&gt;
      `;
  
      shadow.appendChild(wrapper);
    }
  }
  customElements.define('x-bar', Bar);
  
  class Foo extends HTMLElement {
    constructor() {
      super();
      const loop = this.getAttribute('loop') || 10;
  
      const shadow = this.attachShadow({mode: 'open'});
      const wrapper = document.createElement('div');
      
      for(let i=0; i&lt;loop; i++){
       const b = document.createElement('x-bar');
          b.setAttribute('val', `value #${i}`);
        
          wrapper.appendChild(b);
      }
  
      shadow.appendChild(wrapper);
    }
  }
  customElements.define('x-foo', Foo);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;x-foo loop='3'&gt;&lt;/x-foo&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>im expecting that my output would be</p>
  
  <blockquote>
    <p>value #0 </p>
    
    <p>value #1 </p>
    
    <p>value #2 </p>
  </blockquote>
  
  <p>as i have set the attr like this <code>b.setAttribute('val', value #${i});</code></p>
  
  <p>but im getting 3x <code>no value</code></p>
  
  <p>Any inputs on why that is? and/or how to fix it, Thanks!</p>