Search code examples
javascriptvue.jsvuejs3

Why does this custom component get placed outside of the <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>

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?

Simplest example I can make to reproduce the problem locally:

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

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

component registered globally:

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

how it looks like on my end: img on my end

Solution

  • Since OP is not using any bundlers (hence no .vue files), the workaround is to proceed like this

    <tbody>
  <tr is="vue:tab-descgen" ></tr>
</tbody>

    Credit to the answer here. I've updated the answer with more details as to why exactly it happens and to reflect the latest Vue3 changes!