title: Append child to $slot.default
body: <p>I have a component that I need display some custom modal on screen. I don't know where I should put this dialog content, so I did something like that:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="ComponentItself"&gt;
          &lt;div v-show="false" ref="ModalContent"&gt;
              Hello!
          &lt;/div&gt;
  
          &lt;button v-on:click="showModal"&gt;Show modal&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  [...]
  </code></pre>
  
  <blockquote>
    <p><strong>Note:</strong> I could not set the tag name of <code>[ref=ModalContent]</code> to <code>template</code> because the vue reserves this tag to another feature.</p>
  </blockquote>
  
  <p>My idea is when I click on "show modal" it open creates an instance of another component (<code>v-dialog</code>) that I have created with the <code>[ref=ModalContent]</code> content (it should be compiled to support nested vue components).</p>
  
  <pre><code>import Dialog from './Dialog';
  
  const DialogCtor = Vue.extend(Dialog);
  const dialog = new DialogCtor({ propsData: {...} });
  
  dialog['$slots'].default = [ this.$refs['templateNewFolder'].innerHTML ];
  
  {something like document.body.appendChild(dialog.$el)}
  </code></pre>
  
  <p>This another component have a slot that could receives the HTML content to be displayed inside of that. And it just not works. The modal is displayed, but the slot content is <code>undefined</code> or the HTML content not parsed.</p>
  
  <pre><code>&lt;div class="Dialog"&gt;
      [...]
      &lt;slot&gt;&lt;/slot&gt;       
      [...]
  &lt;/div&gt;
  </code></pre>
  
  <p>The current result is something like:</p>
  
  <p><a href="https://i.stack.imgur.com/yzRct.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yzRct.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/s2qZS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s2qZS.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><strong>What I need:</strong></p>
  
  <ul>
  <li>I need to know if I am on the right way. I have about the <code>component</code> feature, but I could not identify or understand if it is/could resolve my problem;</li>
  <li>What I could do to make it work;</li>
  <li>Some similar project could help it, but I could not found anyone;</li>
  <li>Maybe I could resolve my problem if is possible I just <code>.appendChild()</code> directly to <code>$slot.default</code>, but it is not possible;</li>
  </ul>