<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.0.3</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="https://jsbin.com/lurayuxofo/edit?html,js,console,output" rel="nofollow">https://jsbin.com/lurayuxofo/edit?html,js,console,output</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Include inline SVG with some styles within a Vue instance</li>
<li>Init vue instance</li>
</ol>
<h3 dir="auto">What is Expected?</h3>
<ol dir="auto">
<li>SVG to be styled according to the style element</li>
</ol>
<h3 dir="auto">What is actually happening?</h3>
<ol dir="auto">
<li>Vue is giving a warning "[Vue warn]: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as &lt;style&gt;. " and also stripping the style element so the SVG is appearing with no style.</li>
</ol>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">From compiling template error message:<br>
<code class="notranslate">Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.</code><br>
But <code class="notranslate">Cannot use </code><code class="notranslate"> as component root element because it may contain multiple nodes.</code></p><p dir="auto"></p>
<p dir="auto">So I can't use <code class="notranslate">&lt;template&gt;</code> as component root element even if it contains only one node.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto"><strong>Allow the following code as component root.</strong></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template v-if=&quot;conditionA&quot;&gt;
	&lt;div v-if=&quot;conditionC&quot;&gt;&lt;/div&gt;
	&lt;div v-else-if=&quot;conditionD&quot;&gt;&lt;/div&gt;
	&lt;div v-else&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;template v-else&gt;
	&lt;div&gt;&lt;/div&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">v-if</span>="<span class="pl-s">conditionA</span>"<span class="pl-kos">&gt;</span>
	<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-if</span>="<span class="pl-s">conditionC</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
	<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-else-if</span>="<span class="pl-s">conditionD</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
	<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-else</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">v-else</span><span class="pl-kos">&gt;</span>
	<span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto"><strong>Do not allow the following code as component root.</strong></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template&gt;
	&lt;div v-if=&quot;conditionA&quot;&gt;&lt;/div&gt;
	&lt;div v-if=&quot;conditionB&quot;&gt;&lt;/div&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
	<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-if</span>="<span class="pl-s">conditionA</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
	<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-if</span>="<span class="pl-s">conditionB</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span></pre></div>
<p></p>