title: Web component content not rendered
body: <p>I am making my first web component but the shadow dom part is stopping the content from rendering. It's basically a box with a close button in the top right (not yet functional).</p>
  
  <p>The problem is the hello world text momentarily appears and then disappears, presumably when the shadow dom is rendered. I am viewing it in Chrome (70).</p>
  
  <p>Javascript file:</p>
  
  <pre><code>export class InfoBox extends HTMLElement {
  
      constructor() {
  
          super();
  
          this.sRoot = this.attachShadow({mode: 'open'});
  
          this.sRoot.innerHTML = `
          &lt;style&gt;
          .close{
              font-family: sans-serif;
              font-size: 24px;
              float: right;
              padding-top: 10px;
              padding-right: 10px;
          }
          &lt;/style&gt;
          &lt;div class="close"&gt;X&lt;/div&gt;
          `;
      };
  };
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
  
          &lt;title&gt;Web component test bed&lt;/title&gt;
  
          &lt;!-- Load the polyfil for Edge. --&gt;
          &lt;script src="./scripts/webcomponents-lite.js"&gt;&lt;/script&gt;
  
          &lt;script type=module&gt;
  
              import { InfoBox } from './scripts/InfoBox.js';
              window.customElements.define('infobox-content', InfoBox);
  
          &lt;/script&gt;
  
      &lt;/head&gt;
  
  
  
      &lt;body&gt;
  
          &lt;style&gt;
  
              infobox-content{
                  position: absolute;
                  top: 100px;
                  left: 100px;
                  width: 300px;
                  height: 100px;
                  background-color: #333333;
                  color: #ffffff;
              }
  
          &lt;/style&gt;
  
          &lt;infobox-content&gt;Hello World&lt;/infobox-content&gt;
  
  
      &lt;/body&gt;
  </code></pre>
  
  <p></p>