table.vue

...
        <tbody class="table-body">
            <slot></slot>
        </tbody>
...

TableCellRow.vue

<template>
    <td class="table-row-cell" :class="this.class">
        <slot></slot>
    </td>
</template>

how I tried using 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 case, this is what I get:

<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 case I get 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 tried just this:

            <my-table><template #default>
                <tr>
                    <table-row-cell>
                        i am outside the tr
                    </table-row-cell>
                </tr>
            </template>
</my-table>

but I just get this:

<tbody class="table-body"><tr></tr><td class="table-row-cell"> i am outside the tr </td></tbody>

so what’s up with that? I can’t use a component inside a tag, that just has a tag in it? or like what is the issue? If I place my component inside the tag, why does it either throw the out and only render the , or either render the and put everything else below that? Like what? Why does Vue have to be SO difficult, for absolutely no reason?

I just want to put a into the slot of my custom table, and put a custom component inside that – why does it have to be so difficult? Am I tripping or something? I’m not missing a single closing tag, my components are fine, so why is this happening?