Javascript 为什么这个自定义组件会被放置在TR之外

table.vue

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

TableCellRow.vue

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

我如何try 使用它:

<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>

就像这样:

            <my-table>
                <tr>
                    <td>i am inside the tr</td>
                    <table-row-cell>
                        i am outside the tr
                    </table-row-cell>
                </tr>
            </my-table>

在这个最新的 case 中，这就是我得到的:

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

在第一种情况下，我得到了这个:

<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>

我也try 过这个:

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

但我只是得到这个:

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

那是怎么回事？我不能使用标签中只有标签的组件？或者是什么问题？如果我将我的组件放置在标签中，为什么它要么抛出并只渲染，要么渲染并将其他所有内容放在标签下面？比如什么？为什么Vue无缘无故地如此困难？

我只是想将a放入自定义表的插槽中，并将自定义组件放入其中-为什么这么困难？我是不是绊倒了还是怎么了？我没有错过一个结束标签，我的组件很好，那么为什么会发生这种情况呢？

我可以用最简单的例子来本地重现这个问题:

<table class="i-am-the-example-table">
            <tbody>
                <tr class="i-am-the-tr-hello">
                    <table-row-cell>
                        i am outside of the TABLE itself, but idk why
                    </table-row-cell>
                </tr>
            </tbody>
        </table>

tableRowCell组件:

<template>
    <td>
        <slot></slot>
    </td>
</template>

全球注册的组件:

import TableRowCell from "./components/custom/Tables/TableRowCell.vue";
app.component("TableRowCell", TableRowCell);

how it looks like on my end: