table.vue
...
<tbody class="table-body">
<slot></slot>
</tbody>
...
TableCellRow.vue
<template>
<td class="table-row-cell" :class="this.class">
<slot></slot>
</td>
</template>
My attempt to use it:
<my-table>
<template #default>
<tr>
<td>i am inside the tr</td> <----- this is inside the <tr>
<table-row-cell> <-------- this is outside of the <tr>
i am outside the tr
</table-row-cell>
</tr>
</template>
</my-table>
and like this:
<my-table>
<tr>
<td>i am inside the tr</td>
<table-row-cell>
i am outside the tr
</table-row-cell>
</tr>
</my-table>
In this latest scenario, this is what happens:
<tbody class="table-body"> i am inside the tr <td class="table-row-cell"> i am outside the tr </td></tbody>
And in the first instance I observe this:
<tbody class="table-body"><tr><td>i am inside the tr</td></tr><td class="table-row-cell"> i am outside the tr </td></tbody>
I've also attempted just this:
<my-table><template #default>
<tr>
<table-row-cell>
i am outside the tr
</table-row-cell>
</tr>
</template>
</my-table>
But still get this outcome:
<tbody class="table-body"><tr></tr><td class="table-row-cell"> i am outside the tr </td></tbody>
So what could be going wrong? Am I unable to utilize a component within a <tr> tag that solely contains another <tr> tag? Why does Vue present this behavior? I only want to insert a <table-row-cell> into the slot of my customized table and include a custom <td> component within that - why is it proving to be so challenging? Am I overlooking something obvious? Both components seem correctly implemented, so what seems to be the issue?
To illustrate the problem locally, here's the simplest example:
<table class="i-am-the-example-table">
<tbody>
<tr class="i-am-the-tr-hello">
<table-row-cell>
i am external to the TABLE itself, for some unknown reason
</table-row-cell>
</tr>
</tbody>
</table>
tableRowCell component:
<template>
<td>
<slot></slot>
</td>
</template>
Component globally registered:
import TableRowCell from "./components/custom/Tables/TableRowCell.vue";
app.component("TableRowCell", TableRowCell);
The visual representation on my side can be seen here: https://i.sstatic.net/3s7mm9lD.png