title: How to use slots inside of template components in HTML
body: <p>I'm trying to use slots inside of a Vue component to display different titles more easily. However, when I try to replace the slot with data, regardless of the relative positioning in the markup, the slot only uses it's fallback option.</p>
  
  <p>It's my understanding that the template to be used goes first, with a label, then slots are put in and given a "name," with fallback text between the opening and closing slot tags, like so:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template id="somename-template&gt;
       &lt;slot name="attrname&gt;Some Fallback&lt;/slot&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Then data is stored as such:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;somename&gt;
       &lt;span slot="attrname"&gt;Real text&lt;/slot&gt;
  &lt;/somename&gt;
  </code></pre>
  
  <p>I have tried repositioning the  both above and below the script, and above and below the , however no combination provides the expected results.</p>
  
  <p>My actual code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;template id="comp-dem-template"&gt;
          &lt;header-component&gt;&lt;/header-component&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          customElements.define('comp-dem',
  
              class extends HTMLElement {
  
              constructor() {
  
                  super();
  
                  const template = document.getElementById('comp-dem-template').content;
  
                  const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));
  
              }
  
          });
          Vue.component('header-component', {
              template: '&lt;h1&gt;&lt;slot name="pagetitle"&gt;Page Title Fallback&lt;/slot&gt;&lt;/h1&gt;'
          })
          new Vue({ el: '#comp-dem-template' })
      &lt;/script&gt;
      &lt;comp-dem&gt;
          &lt;span slot="pagetitle"&gt;
              Images
          &lt;/span&gt;
      &lt;/comp-dem&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The markup should look like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;Images&lt;/h1&gt;
  </code></pre>
  
  <p>However, instead looks like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;Page Title Fallback&lt;/h1&gt;
  </code></pre>
  
  <p>I can tell it's probably a super simple thing that I'm doing wrong (or it's the wrong tool for the job), but even looking at other working examples, I can't tell what that exactly is.</p>