学习-vue3 解析 DOM 模板时元素位置受限

元素位置受限

<ul>
    <li>></li>
</ul>

<table>
    <tr></tr>
</table>

<select>
    <option></option>
</select>

有些 HTML 元素，诸如 <ul>、<table> 和 <select>，对于可以出现在其内部的元素是有严格限制。反之亦然，诸如 <li>、<tr> 和 <option>，只能出现在特定的元素的内部。

当我们使用这些有约束条件的元素时，会遇到一些问题。

<table>
    <blog-post-row></blog-post-row>
</table>

自定义组件<blog-post-row>会被作为无效内容提升到外部，导致渲染结果出错。

解决方法：使用 is attribute 作为一个变通的方法

<table>
  <tr is="vue:blog-post-row"></tr>
</table>

TIP:

当它用于原生HTML元素时， is 的值必须以 vue: 开头，才可以被解释为 Vue 组件。避免和原生自定义元素混淆。