<p dir="auto">use  slot but  Has been an error</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!--touchRipple--&gt;
  &lt;div @mousedown=&quot;handleMouseDown&quot; @mouseup=&quot;end()&quot; @mouseleave=&quot;end()&quot; @touchstart=&quot;handleTouchStart&quot;  @touchend=&quot;end()&quot; @touchcancel=&quot;end()&quot;&gt;
    &lt;div :style=&quot;style&quot;&gt;
      &lt;circle-ripple :key=&quot;ripple.key&quot; v-for=&quot;ripple in ripples&quot;&gt;&lt;/circle-ripple&gt;
    &lt;/div&gt;
    &lt;slot&gt;&lt;/slot&gt;
  &lt;/div&gt;"><pre class="notranslate"><span class="pl-c">&lt;!--touchRipple--&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">@mousedown</span>="<span class="pl-s">handleMouseDown</span>" <span class="pl-c1">@mouseup</span>="<span class="pl-s">end()</span>" <span class="pl-c1">@mouseleave</span>="<span class="pl-s">end()</span>" <span class="pl-c1">@touchstart</span>="<span class="pl-s">handleTouchStart</span>"  <span class="pl-c1">@touchend</span>="<span class="pl-s">end()</span>" <span class="pl-c1">@touchcancel</span>="<span class="pl-s">end()</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">:style</span>="<span class="pl-s">style</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">circle-ripple</span> <span class="pl-c1">:key</span>="<span class="pl-s">ripple.key</span>" <span class="pl-c1">v-for</span>="<span class="pl-s">ripple in ripples</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">circle-ripple</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">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">div</span><span class="pl-kos">&gt;</span></pre></div>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  &lt;touch-ripple&gt;
      &lt;icon :value=&quot;icon&quot; :class=&quot;[iconClass]&quot;&gt;&lt;/icon&gt;
   &lt;/touch-ripple&gt;"><pre class="notranslate">  <span class="pl-kos">&lt;</span><span class="pl-ent">touch-ripple</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">icon</span> <span class="pl-c1">:value</span>="<span class="pl-s">icon</span>" <span class="pl-c1">:class</span>="<span class="pl-s">[iconClass]</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">icon</span><span class="pl-kos">&gt;</span>
   <span class="pl-kos">&lt;/</span><span class="pl-ent">touch-ripple</span><span class="pl-kos">&gt;</span></pre></div>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.11</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://stackblitz.com/edit/vuejs-template-issue" rel="nofollow">https://stackblitz.com/edit/vuejs-template-issue</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Using the minimal reproduction link:</p>
<ol dir="auto">
<li>Visit the minimal reproduction link</li>
<li>Inspect the document under both "Template Content" headers.
<ul dir="auto">
<li>Notice that under the first header the template tags are being stripped.</li>
<li>Notice that under the second header the template tags are being preserved.</li>
</ul>
</li>
</ol>
<p dir="auto">To re-create this in a sandbox of your own, you can perform the following:</p>
<ol dir="auto">
<li>Create a block level element with the v-pre directive and place template tags a children.
<ul dir="auto">
<li>Observe the template tags being removed.</li>
</ul>
</li>
<li>Add any VueJS compiled element as a sibling to the block level element with v-pre.
<ul dir="auto">
<li>Observe the template tags are being preserved.</li>
</ul>
</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">In both cases the presence of v-pre should instruct Vue not to remove the template tags.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">v-pre is only preserving the template tags when a VueJS compiled element is sibling to the element with the v-pre tag.</p>
<hr>
<p dir="auto">I am working on integrating Web Components into VueJS applications and would like to leverage the power of the Shadow DOM.</p>