Удалены HTML-элементы THEAD, TBODY, TR из слота Custom Table

Question

Я пытаюсь выучить VueJS. Я все еще на начальном уровне, поэтому прошу прощения за любые недоразумения.

У меня есть файл .vue, который отображает пользовательский элемент таблицы.

<template>
    <table v-bind:class="classes">
        <slot></slot>
    </table>
</template>

<script>
    export default {
        data() {
            return {
                styles: {
                    separator: 'separator',
                    solid: 'bg',
                    bg: 'bg'
                }
            };
        },
        props: {
            type: { default: 'separator' },
            theme: { default: 'primary' }
        },
        computed: {
            classes: function () {
                return `table m-table m-table--head-${this.styles[this.type]}-${this.theme}`;
            }
        }
    }
</script>

В моем HTML-файле, который пытается создать шаблон, это выглядит так:

<custom-table type="solid" theme="primary">
    <thead>
        <tr>
            <th>Column 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
        </tr>
    </tbody>
</custom-table>

Но когда рендеринг страницы, все html в <slot> удаляется, оставляя только текст:

Если я позвоню $vm0.$slots.defaults[0].elm, все, что я получу, это text, без HTML, без <thead> и т. Д.

Я искал в Интернете vuejs2 stripping out html from slots и не могу найти ничего, связанного с , почему это происходит.

Я понимаю, что мой .vue файл может быть не идеальным в данный момент, я просто пытаюсь получить основы.

Любая помощь, указывающая мне в правильном направлении, почему она удаляет HTML (или что еще может быть), приветствуется.

Answer 1

Это связано с ограничением в HTML: дочерние элементы таблицы (например, <thead>, <tr> и т. Д.) Могут появляться только в пределах <table>, даже для пользовательского элемента.

Официальный обходной путь для использования настраиваемой таблицы - использование атрибута HTML is, который поддерживается Vue:

<table is="custom-table" type="solid" theme="primary">
    <thead>
        <tr>
            <th>Column 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
        </tr>
    </tbody>
</table>

См. vue.js: в чем разница между и

?