<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">This is a problem to convert some Bootstrap 4 components (or other CSS frameworks) for example:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;progress&quot;&gt;
  &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; style=&quot;width: 15%&quot; aria-valuenow=&quot;15&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;progress-bar bg-success&quot; role=&quot;progressbar&quot; style=&quot;width: 30%&quot; aria-valuenow=&quot;30&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;progress-bar bg-info&quot; role=&quot;progressbar&quot; style=&quot;width: 20%&quot; aria-valuenow=&quot;20&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">progress</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">progress-bar</span>" <span class="pl-c1">role</span>="<span class="pl-s">progressbar</span>" <span class="pl-c1">style</span>="<span class="pl-s">width: 15%</span>" <span class="pl-c1">aria-valuenow</span>="<span class="pl-s">15</span>" <span class="pl-c1">aria-valuemin</span>="<span class="pl-s">0</span>" <span class="pl-c1">aria-valuemax</span>="<span class="pl-s">100</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">class</span>="<span class="pl-s">progress-bar bg-success</span>" <span class="pl-c1">role</span>="<span class="pl-s">progressbar</span>" <span class="pl-c1">style</span>="<span class="pl-s">width: 30%</span>" <span class="pl-c1">aria-valuenow</span>="<span class="pl-s">30</span>" <span class="pl-c1">aria-valuemin</span>="<span class="pl-s">0</span>" <span class="pl-c1">aria-valuemax</span>="<span class="pl-s">100</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">class</span>="<span class="pl-s">progress-bar bg-info</span>" <span class="pl-c1">role</span>="<span class="pl-s">progressbar</span>" <span class="pl-c1">style</span>="<span class="pl-s">width: 20%</span>" <span class="pl-c1">aria-valuenow</span>="<span class="pl-s">20</span>" <span class="pl-c1">aria-valuemin</span>="<span class="pl-s">0</span>" <span class="pl-c1">aria-valuemax</span>="<span class="pl-s">100</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></pre></div>
<p dir="auto">We can not create two components <code class="notranslate">progress-group</code> and <code class="notranslate">progress</code> because inside dives can not accept another div (<code class="notranslate">parent element</code>). Bootstrap 4 does not work in this way.</p>
<p dir="auto">Existing <code class="notranslate">parent element</code> for each component destroys the Bootstrap 4 structure I can show you another examples:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div id=&quot;carouselExampleControls&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;carousel-item active&quot;&gt;
      &lt;img src=&quot;...&quot; class=&quot;d-block w-100&quot; alt=&quot;...&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img src=&quot;...&quot; class=&quot;d-block w-100&quot; alt=&quot;...&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img src=&quot;...&quot; class=&quot;d-block w-100&quot; alt=&quot;...&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">carouselExampleControls</span>" <span class="pl-c1">class</span>="<span class="pl-s">carousel slide</span>" <span class="pl-c1">data-ride</span>="<span class="pl-s">carousel</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">carousel-inner</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">carousel-item active</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">...</span>" <span class="pl-c1">class</span>="<span class="pl-s">d-block w-100</span>" <span class="pl-c1">alt</span>="<span class="pl-s">...</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">class</span>="<span class="pl-s">carousel-item</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">...</span>" <span class="pl-c1">class</span>="<span class="pl-s">d-block w-100</span>" <span class="pl-c1">alt</span>="<span class="pl-s">...</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">class</span>="<span class="pl-s">carousel-item</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">...</span>" <span class="pl-c1">class</span>="<span class="pl-s">d-block w-100</span>" <span class="pl-c1">alt</span>="<span class="pl-s">...</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></pre></div>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;input-group mb-3&quot;&gt;
  &lt;div class=&quot;input-group-prepend&quot;&gt;
    &lt;span class=&quot;input-group-text&quot;&gt;$&lt;/span&gt;
  &lt;/div&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; aria-label=&quot;Amount (to the nearest dollar)&quot;&gt;
  &lt;div class=&quot;input-group-append&quot;&gt;
    &lt;span class=&quot;input-group-text&quot;&gt;.00&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">input-group mb-3</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">input-group-prepend</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">input-group-text</span>"<span class="pl-kos">&gt;</span>$<span class="pl-kos">&lt;/</span><span class="pl-ent">span</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">input</span> <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" <span class="pl-c1">aria-label</span>="<span class="pl-s">Amount (to the nearest dollar)</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">input-group-append</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">input-group-text</span>"<span class="pl-kos">&gt;</span>.00<span class="pl-kos">&lt;/</span><span class="pl-ent">span</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></pre></div>
<p dir="auto">and a lot more.</p>
<p dir="auto">So I want to ask for <strong>containerless (a component without <code class="notranslate">parent element</code> as a wrapper) feature</strong> for component design system. It can help us to convert a CSS framework to complete Vue toolbox.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">I am not sure the right way may be a config as <code class="notranslate">{ containerless : true }</code></p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Right now you can only have 1 root element per template. I know this is by design, but I find myself wrapping everything around a <code class="notranslate">&lt;div&gt;</code> a lot. Now, most of the time is not a big deal, I can live with that, the problem is when either Bootstrap requires a very specific hierarchy, or when dealing with Tables that also require a very specific hierarchy and wrapping everything on a div is not an option.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">Now, there will be a couple of things to figure out, mainly to what element will the properties provided on the Custom Element will be attached to. I think there two things that can be done:</p>
<ol dir="auto">
<li>Find the first child and stick everything to it.</li>
<li>Provide a custom attribute to indicate to what element they should be attached to.</li>
</ol>