support static tbody tr td elements

[shengxinjing]

Direct set div.innerHTML in insertStaticContent will result in lost rendering of table tags such as tr,td， we need to wrap the right table elements before innerHTML

template example

template code
vue bug project

reder a simple table in App.vue

<template>
<table>
  <tr>
    <td class="col-md-1"> vue3 </td>
    <td class="col-md-1"> vue3 </td>
    <td class="col-md-1"> vue3 </td>
    <td class="col-md-1"> vue3 </td>
    <td class="col-md-1"> vue3 </td>
  </tr>
</table>
</template>

<script>
export default {
  
}
</script>

<style>
.col-md-1{
  border:1px solid black;
}
</style>

but only render the text

<table> vue3  vue3  vue3  vue3  vue3 </table>

Bug Reason

const div = document.createElement('div')
div.innerHTML = '<tr><td class=\"col-md-1\"> vue3 </td><td class=\"col-md-1\"> vue3 </td><td class=\"col-md-1\"> vue3 </td><td class=\"col-md-1\"> vue3 </td><td class=\"col-md-1\"> vue3 </td></tr>'
console.log(div.innerHTML)
VM379:3  vue3  vue3  vue3  vue3  vue3 

[underfin]

Thanks for this pr. But we can't warp some tags with user provider,like this case.And if we do it, should process it in complier time instead of runtime.
In fact,we should avoid stringfy some node which cause error when use innnerHtml , eg. table related nodes.

[shengxinjing]

thanks for reply , aviod compiler transform table node to staticNode maybe better,
I'll try to submit the code again later. thanks

[underfin]

Here has an solution for this problem.#1230 track here.

[shengxinjing]

compiler is better for code organization
maybe runtime is better for perf

[shengxinjing]

compiler is better for code organization
maybe runtimer is better for perf

No.Because we also consider ssr.If we wrap some tags only in runtime-dom.It will cause hydration error.

we wrap table element and get firstChild by depth for return ,we also has same dom tree in ssr

[underfin]

Yeah.I realizi it.So call back it.

[yyx990803]

Thanks, skipping stringification at the compiler level is safer and more efficient. It also avoids adding more runtime code.

[shengxinjing]

thanks for reply