<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Many data visualization and graphics library do DOM manipulation and most of them the DOMElement can be extracted.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const rect = SVG.adopt(this.$refs.rect.elm)
rect.node // this is the SVGElement and in chrome console will output &lt;rect id=&quot;r1&quot;&gt;&lt;/rect&gt;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">rect</span> <span class="pl-c1">=</span> <span class="pl-c1">SVG</span><span class="pl-kos">.</span><span class="pl-en">adopt</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$refs</span><span class="pl-kos">.</span><span class="pl-c1">rect</span><span class="pl-kos">.</span><span class="pl-c1">elm</span><span class="pl-kos">)</span>
<span class="pl-s1">rect</span><span class="pl-kos">.</span><span class="pl-c1">node</span> <span class="pl-c">// this is the SVGElement and in chrome console will output &lt;rect id="r1"&gt;&lt;/rect&gt;</span></pre></div>
<p dir="auto">Let's say we want to build an abstraction by design it as a component that can draw a rectangle and after the drawing is done (by hold&amp;drag mouse button) that rectangle will be placed in another section. The usage will be like this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;annotator&gt;
  &lt;img src=&quot;background&quot; /&gt;
  &lt;rect slot=&quot;drawing&quot; stroke=&quot;red&quot; /&gt;
  &lt;rect slot=&quot;annotation&quot; stroke=&quot;green&quot; x=&quot;100&quot; y=&quot;100&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;
&lt;/annotator&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">annotator</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">src</span>="<span class="pl-s">background</span>" /&gt;
  <span class="pl-kos">&lt;</span><span class="pl-ent">rect</span> <span class="pl-c1">slot</span>="<span class="pl-s">drawing</span>" <span class="pl-c1">stroke</span>="<span class="pl-s">red</span>" /&gt;
  <span class="pl-kos">&lt;</span><span class="pl-ent">rect</span> <span class="pl-c1">slot</span>="<span class="pl-s">annotation</span>" <span class="pl-c1">stroke</span>="<span class="pl-s">green</span>" <span class="pl-c1">x</span>="<span class="pl-s">100</span>" <span class="pl-c1">y</span>="<span class="pl-s">100</span>" <span class="pl-c1">width</span>="<span class="pl-s">100</span>" <span class="pl-c1">height</span>="<span class="pl-s">100</span>" /&gt;
<span class="pl-kos">&lt;/</span><span class="pl-ent">annotator</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">and <code class="notranslate">&lt;annotator&gt;</code> will be like this</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;svg&gt;

    &lt;foreignObject&gt;
      &lt;slot&gt;&lt;/slot&gt;
    &lt;/foreignObject&gt;

    &lt;g fill=&quot;black&quot; transform=&quot;translate(100, 100)&quot;&gt;
      &lt;slot name=&quot;annotation&quot;&gt;&lt;/slot&gt;
    &lt;/g&gt;

    &lt;slot name=&quot;drawing&quot;&gt;&lt;/slot&gt;

  &lt;/svg&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">svg</span><span class="pl-kos">&gt;</span>

    <span class="pl-kos">&lt;</span><span class="pl-ent">foreignObject</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">slot</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">slot</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">foreignObject</span><span class="pl-kos">&gt;</span>

    <span class="pl-kos">&lt;</span><span class="pl-ent">g</span> <span class="pl-c1">fill</span>="<span class="pl-s">black</span>" <span class="pl-c1">transform</span>="<span class="pl-s">translate(100, 100)</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">slot</span> <span class="pl-c1">name</span>="<span class="pl-s">annotation</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">slot</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">g</span><span class="pl-kos">&gt;</span>

    <span class="pl-kos">&lt;</span><span class="pl-ent">slot</span> <span class="pl-c1">name</span>="<span class="pl-s">drawing</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">slot</span><span class="pl-kos">&gt;</span>

  <span class="pl-kos">&lt;/</span><span class="pl-ent">svg</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">After the drawing is done, the rectangle will be moved and fill it with black (or SVG texture for the more complex case). This can be done by clone the element in <code class="notranslate">drawing</code> slots to <code class="notranslate">annotation</code> slot.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const rect = SVG.adopt(this.$slots.drawing[0].elm)

rect.on('click', event =&gt; doDrawingLogic(event))

rect.on('drawfinish', event =&gt; {
// the reason to clone and move slot is so any logic in annotation slot can be applied
// the clone itself is to preserve `&lt;rect stroke=&quot;red&quot; slot=&quot;drawing&quot; /&gt;` so that it can be referenced again
/** some logic here */
})"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">rect</span> <span class="pl-c1">=</span> <span class="pl-c1">SVG</span><span class="pl-kos">.</span><span class="pl-en">adopt</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$slots</span><span class="pl-kos">.</span><span class="pl-c1">drawing</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">elm</span><span class="pl-kos">)</span>

<span class="pl-s1">rect</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'click'</span><span class="pl-kos">,</span> <span class="pl-s1">event</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">doDrawingLogic</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span><span class="pl-kos">)</span>

<span class="pl-s1">rect</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'drawfinish'</span><span class="pl-kos">,</span> <span class="pl-s1">event</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
<span class="pl-c">// the reason to clone and move slot is so any logic in annotation slot can be applied</span>
<span class="pl-c">// the clone itself is to preserve `&lt;rect stroke="red" slot="drawing" /&gt;` so that it can be referenced again</span>
<span class="pl-c">/** some logic here */</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">In that case there is need to make createElement accept DOMElement for duplicating or maybe also converting Node to VNode.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="newRect = newRect.clone().animate().dmove(100, 100)

const clone = this.$createElement(newRect.node)
this.$slots.annotation.push(clone)"><pre class="notranslate"><span class="pl-s1">newRect</span> <span class="pl-c1">=</span> <span class="pl-s1">newRect</span><span class="pl-kos">.</span><span class="pl-en">clone</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">animate</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">dmove</span><span class="pl-kos">(</span><span class="pl-c1">100</span><span class="pl-kos">,</span> <span class="pl-c1">100</span><span class="pl-kos">)</span>

<span class="pl-k">const</span> <span class="pl-s1">clone</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">$createElement</span><span class="pl-kos">(</span><span class="pl-s1">newRect</span><span class="pl-kos">.</span><span class="pl-c1">node</span><span class="pl-kos">)</span>
<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$slots</span><span class="pl-kos">.</span><span class="pl-c1">annotation</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">clone</span><span class="pl-kos">)</span></pre></div>
<blockquote>
<p dir="auto">In above example, if createElement act as creating element then there will be 2 rectangles lol</p>
</blockquote>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">Basic usage</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const div = document.getElementById(&quot;myDiv&quot;)

this.$createElement(div)"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">div</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"myDiv"</span><span class="pl-kos">)</span>

<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">$createElement</span><span class="pl-kos">(</span><span class="pl-s1">div</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Clone and move from 1 slots to another slot</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const clone = this.$createElement(this.$slots.mySlot[0].elm)

this.$slots.default.push(clone)"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">clone</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">$createElement</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$slots</span><span class="pl-kos">.</span><span class="pl-c1">mySlot</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">elm</span><span class="pl-kos">)</span>

<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$slots</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-s1">clone</span><span class="pl-kos">)</span></pre></div>
<h3 dir="auto">Version</h3>
<p dir="auto">2.5.13</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/mmestas/ca7v214w/1/" rel="nofollow">https://jsfiddle.net/mmestas/ca7v214w/1/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto"></p>
<p dir="auto">Type in 0-2 or any number value with a "-" after it.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">That only numbers are allowed</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">the v.model.number with type=number allows for the input of characters other than numbers, specifically, "-".<br>
My guess is this is allowed because of numbers like "-3" but this enables someone to enter (eg: 0-2) into the input.<br>
I had to create special functions using v-on:keypress and v-on:keyup to validate the inputs to not receive something like "0-2"</p>