Table with content distribution in Vue.js not being rendered properly

Question

I am trying to create a component that is pretty much just a table and use content distribution to add elements inside of it.

But for some reason my slot elements are rendered before the table, so I am probably doing something wrong.

Here is the root app template:

<div id="app">
  <my-comp>
    <row-comp></row-comp>
    <row-comp></row-comp>
  </my-comp>
</div>

And these are my components declaration:

new Vue({
  el: '#app',
  components: {
    'my-comp': {
      template: '\
        <table> \
          <thead> \
          <tr> \
            <th>header</th> \
          </tr> \
        </thead> \
        <tbody> \
          <tr> \
            <td>parent row</td> \
          <tr> \
          <slot></slot> \
        </tbody> \
      </table>'
    },

    'row-comp': {
      template: '<tr><td>content</td></tr>'
    }
  }
})

Here is jsfiddle: https://jsfiddle.net/vxc0o3mf/

Thank you.

Answer 1

<table> cannot contain any element other than <tr> and other table-specific elements, so upon rendering your <slot> is immediately moved out of the table. This is a tough thing to workaround, basically you'll have to use legal table elements with the is="component" attribute to add the components:

<div id="app">
  <table>
    <thead is="header-comp"></thead>
    <tr is="row-comp"></tr>
  </table>
</div>

Then:

new Vue({
    el: '#app',
  components: {
    'row-comp': {
        template: '<tr><td>content</td></tr>'
    },
    'header-comp': {
      template:'<thead><tr><th>header</th></tr></thead>'
    }
  }
})

Fiddle: https://jsfiddle.net/vxc0o3mf/2/

I know this doesn't have the full functionality you're looking for, but you cannot use <slot> with tables :(