title: How to append TEMPLATE Element to shadow dom?
body: <p>When I try to append template to the shadow DOM, it only shows as a &quot;#documentFragment&quot;, and never renders or copies the actual elements structured within the template.</p>
  <p>I spent hours trying to figure it out. The solution I found was to use:</p>
  <ul>
  <li>template.firstElementChild.cloneNode(true);</li>
  </ul>
  <p>instead of:</p>
  <ul>
  <li>template.content.cloneNode(true);</li>
  </ul>
  <p>then, and only then, everything works as expected.</p>
  <p>My question is, am I doing something wrong?</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>const template = document.createElement('template');
  const form = document.createElement('form');
  const gateway = document.createElement('fieldset');
  const legend = document.createElement('legend');
  gateway.appendChild(legend);
  const username = document.createElement('input');
  username.setAttribute('type', 'email');
  username.setAttribute('name', 'username');
  username.setAttribute('placeholder', 'email@address.com');
  username.setAttribute('id', 'username');
  gateway.appendChild(username);
  const button = document.createElement('button');
  button.setAttribute('type', 'button');
  button.innerHTML = 'Next';
  gateway.appendChild(button);
  form.appendChild(gateway);
  template.appendChild(form);
  class UserAccount extends HTMLElement {
    constructor() {
      super();
      const shadowDOM = this.attachShadow({
        mode: 'open'
      });
      const clone = template.firstElementChild.cloneNode(true);
      // This does not work
      // const clone = template.content.cloneNode(true);
      shadowDOM.appendChild(clone);
      shadowDOM.querySelector('legend').innerHTML = this.getAttribute('api');
    }
  }
  window.customElements.define('user-account', UserAccount);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
  
    &lt;!-- &lt;link rel="stylesheet" href="./css/main.css"&gt; --&gt;
    &lt;script src="./js/user-account.js" defer&gt;&lt;/script&gt;
    &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;user-account api="/accounts"&gt;&lt;/user-account&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>