title: Change the root element of a component
body: <p>VueJS allows only one root element per component. In most case that's fine to wrap the component inside a <code>div</code> tag but it can sometimes cause unexpected behaviors.</p>
  
  <p>For instance, when using Bootstrap, if you put a div between two elements (like <code>&lt;b-row&gt;</code> and <code>&lt;b-col&gt;</code>), the layout get totally broken. </p>
  
  <p>Many other elements in the framework needs to follow a specific order and that's why having one root element could be problematic.</p>
  
  <p>Is there a way to dynamically set the root element? </p>
  
  <p>To illustrate what i'm saying, take a look at this example:</p>
  
  <p>If a have a component <code>my-h1</code> like this: </p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h1&gt;Hello world&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>which get called here:</p>
  
  <pre><code>&lt;div id="my-app"&gt;
      &lt;my-h1 /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code above will output:</p>
  
  <pre><code>&lt;div id="my-app"&gt;
      &lt;div&gt;
          &lt;h1&gt;Hello world&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can i get this output:</p>
  
  <pre><code>&lt;div id="my-app"&gt;
      &lt;p&gt;
          &lt;h1&gt;Hello world&lt;/h1&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and at another place, this one:</p>
  
  <pre><code>&lt;div id="my-app"&gt;
      &lt;a&gt;
          &lt;h1&gt;Hello world&lt;/h1&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(I know these tags doesn't make any sense, it's only for the purpose of this exemple)</p>
  
  <hr>
  
  <p>I hope you see what i mean. Still have one root element, but setting it to be different, with a prop or something else :)</p>