title: shadow DOM not showing content. How to make content visible in DOM?
body: <p>As you can see I want to add content dynamically but shadow DOM is not showing content How can I make content visible? I want to make content visible. </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>let shadow = document.querySelector('#nameTag').createShadowRoot();
  let content_area =  document.querySelector("#nameTag");
  content_area.innerHTML = '&lt;p&gt;Hello world!&lt;/p&gt;';
  let template = document.querySelector('#nameTagTemplate');
  shadow.appendChild( template.content.cloneNode(true) );
  shadow.appendChild( template.content );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h2{
      color: red;
      font-size: 24px;
      font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Hello world!&lt;/h2&gt;
  &lt;div id="nameTag"&gt;&lt;/div&gt;
  &lt;template id="nameTagTemplate"&gt;
      &lt;div class="outer"&gt;
          &lt;div class="name"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>