<h3 dir="auto">Vue.js version</h3>
<p dir="auto">1.0.21</p>
<h3 dir="auto">My code here</h3>
<p dir="auto">my svg-icon component:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;svg viewBox=&quot;0 0 24 24&quot;
       preserveAspectRatio=&quot;xMidYMid meet&quot;
       fit
       :style=&quot;style&quot;&gt;
    &lt;g v-if=&quot;path&quot;&gt;&lt;path :d=&quot;path&quot;/&gt;&lt;/g&gt;
    &lt;slot v-if=&quot;!path&quot;&gt;&lt;/slot&gt;
  &lt;/svg&gt;
&lt;/template&gt;

&lt;script type=&quot;text/babel&quot;&gt;
  export default {
    props: {
      path: {
        type: String,
        default: ''
      },
      size: {
        type: Number,
        default: 24
      }
    },
    computed: {
      style () {
        return {
          fill: 'currentcolor',
          verticalAlign: 'middle',
          width: this.size,
          height: this.size
        }
      }
    }
  }
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;template&gt;
  &lt;svg viewBox="0 0 24 24"
       preserveAspectRatio="xMidYMid meet"
       fit
       :style="style"&gt;
    &lt;g v-if="path"&gt;&lt;path :d="path"/&gt;&lt;/g&gt;
    &lt;slot v-if="!path"&gt;&lt;/slot&gt;
  &lt;/svg&gt;
&lt;/template&gt;

&lt;script type="text/babel"&gt;
  export default {
    props: {
      path: {
        type: String,
        default: ''
      },
      size: {
        type: Number,
        default: 24
      }
    },
    computed: {
      style () {
        return {
          fill: 'currentcolor',
          verticalAlign: 'middle',
          width: this.size,
          height: this.size
        }
      }
    }
  }
&lt;/script&gt;
</code></pre></div>
<p dir="auto">and sometimes I want to use it like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;svg-icon :size=&quot;size&quot;&gt;
    &lt;circle cx=&quot;6.181&quot; cy=&quot;4.063&quot; r=&quot;2.591&quot;&gt;&lt;/circle&gt;
    &lt;path d=&quot;M.6 12.202a5.614 5.614 0 0 1 11.228 0&quot;&gt;&lt;/path&gt;
    &lt;g&gt;
      &lt;circle cx=&quot;11.98&quot; cy=&quot;6.993&quot; r=&quot;1.569&quot;&gt;&lt;/circle&gt;
      &lt;path d=&quot;M12.24 12.202c.018-1.853-.625-2.927-1.35-3.495-.29-.227.721-.185 1.11-.185 1.877 0 3.4 1.802 3.4 3.68&quot;&gt;&lt;/path&gt;
    &lt;/g&gt;
  &lt;/svg-icon&gt;
&lt;/template&gt;

&lt;script&gt;
  import svgIcon from '../icon/icon.vue'
  export default {
    props: ['size'],
    components: {
      svgIcon
    }
  }
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;template&gt;
  &lt;svg-icon :size="size"&gt;
    &lt;circle cx="6.181" cy="4.063" r="2.591"&gt;&lt;/circle&gt;
    &lt;path d="M.6 12.202a5.614 5.614 0 0 1 11.228 0"&gt;&lt;/path&gt;
    &lt;g&gt;
      &lt;circle cx="11.98" cy="6.993" r="1.569"&gt;&lt;/circle&gt;
      &lt;path d="M12.24 12.202c.018-1.853-.625-2.927-1.35-3.495-.29-.227.721-.185 1.11-.185 1.877 0 3.4 1.802 3.4 3.68"&gt;&lt;/path&gt;
    &lt;/g&gt;
  &lt;/svg-icon&gt;
&lt;/template&gt;

&lt;script&gt;
  import svgIcon from '../icon/icon.vue'
  export default {
    props: ['size'],
    components: {
      svgIcon
    }
  }
&lt;/script&gt;
</code></pre></div>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">I expect both pass a path props and slot is OK</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">slot is not OK, and path props seems fine.</p>
<p dir="auto">the warn showed when use slot<br>
<em>vue.common.js?e881:987[Vue warn]: Unknown custom element:  - did you register the component correctly? For recursive components, make sure to provide the "name" option.</em></p>
<h3 dir="auto">Vue.js version</h3>
<p dir="auto">1.0.16</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="http://jsfiddle.net/5sH6A/320/" rel="nofollow">http://jsfiddle.net/5sH6A/320/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">JSfiddle above... inspect console and errors will show up.</p>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">'g' and 'line' to be treated as svg elements after being dropped in between two svg tags via 'slot''</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">'g' and 'line' not being recognized as svg elements and being treated as custom components unless warpped in another 'svg' tag on top of an already existing 'svg' tag.</p>
<p dir="auto">error:  Unknown custom element: 'g'- did you register the component correctly? For recursive components, make sure to provide the "name" option.</p>