title: How to fix "default slot raw html rendering in Vue.js component"
body: <p>I have a custom input component and try to use <em>slot</em> for pass another element to that component, but when use any html like a simple button inside custom input component tags on the parent component the content render as a raw html(like escaped html text)  </p>
  
  <p>I was tried to write html button code inside <code>&lt;slot&gt;&lt;/slot&gt;</code> tag on the custom input component and that's work fine but when pass from parent component broken!</p>
  
  <p>the custom input template is like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="form-group" :class="{ 'ltr ltr-input': ltr }"&gt;
      &lt;textarea :id="id" :value="value" @change="input"&gt;&lt;/textarea&gt;
      &lt;label :for="id"&gt;{{ fieldLabel }}&lt;/label&gt;
      &lt;slot&gt;
        &lt;button&gt;fallback&lt;/button&gt;
      &lt;/slot&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>on the parent element:</p>
  
  <pre><code>&lt;TextArea id="message" v-model="message" label="message" required&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/TextArea&gt;
  </code></pre>
  
  <p>This is screenshot about the result of above code: </p>
  
  <p><img src="https://i.ibb.co/d0VVHh4/slot.jpg" alt="slot"></p>