Vue自定义TableCell组件为何被渲染到<tr>标签外部？

问题原因 #

HTML表格有严格的DOM结构约束：<tr>的直接子元素只能是<td>、<th>这类表格原生元素。当你在<tr>内放置自定义组件（比如<table-row-cell>）时，浏览器会判定这个自定义标签不符合<tr>的子元素规范，自动将自定义组件标签从<tr>中移到表格外部。而组件内部的<td>会因为父组件标签被移除，变成游离状态，最终出现在<tr>之外，脱离表格结构。

解决方案 #

Vue 2 场景 #

1. 使用is属性绑定组件
   利用Vue 2对原生元素is属性的支持，将组件绑定到<td>上，让浏览器识别为合法的表格单元格：

   <tr>
     <td is="table-row-cell">
       <!-- 插槽内容 -->
     </td>
   </tr>
   

   注意：table-row-cell需提前在Vue实例中全局注册，或在当前组件中局部注册。

2. 改为函数式组件
   函数式组件没有独立的根节点，直接返回<td>内容，避免额外的自定义标签触发浏览器DOM重构：

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

   使用时直接在<tr>中引入即可，不会产生多余标签。

Vue 3 场景 #

1. 使用v-is指令
   Vue 3中用v-is替代Vue 2的is属性，语法上需要传入字符串形式的组件名：

   <tr>
     <td v-is="'table-row-cell'">
       <!-- 插槽内容 -->
     </td>
   </tr>
   

2. 渲染函数/JSX实现组件
   直接通过渲染函数返回<td>，彻底避免组件根标签的干扰：

   import { h } from 'vue'
   
   export default {
     setup(props, { slots }) {
       return () => h('td', {}, slots.default?.())
     }
   }
   

   组件渲染时直接输出<td>，完全符合表格结构规范。

3. 属性透传优化（可选）
   如果需要向<td>传递额外属性，关闭组件的属性继承，将属性透传给<td>：

   <script setup>
   defineOptions({ inheritAttrs: false })
   </script>
   
   <template>
     <td v-bind="$attrs">
       <slot></slot>
     </td>
   </template>
   

   结合v-is使用时，能确保所有属性正确绑定到<td>上。

内容的提问来源于stack exchange，提问作者user13698713