Vue3根组件使用挂载容器innerHTML作为模板不生效

渲染中断的核心原因是原生HTML解析规则和DOM内模板的自闭合自定义标签写法冲突，和Vue读取挂载容器innerHTML作为模板的机制没有关系：

• 浏览器解析原生HTML时，只认官方规定的空元素（比如<input>、<img>、<br>这类不需要子节点的原生标签）的自闭合写法，对自定义标签根本不识别/>这种自闭合语法。你写在挂载容器里的<rwy id="rwy07C25C" rwy1="07C" rwy2="25C" />，浏览器不会觉得这个标签已经写完了，反而会把后面所有的DOM内容都算成这个rwy标签的内部子节点，直到碰到隐式闭合的位置才停。等Vue去读挂载容器的innerHTML的时候，拿到的DOM结构已经被浏览器解析坏了，自然渲染到第一个rwy的位置就断了。
• 你把同样的内容写到createApp()的template选项里能跑通，是因为这时候模板是字符串，直接交给Vue自己的模板编译器解析，Vue的编译器本来就支持自定义组件的自闭合写法，全程不经过浏览器原生HTML解析那一步，当然不会出问题。

直接写在页面HTML里的DOM模板，别给自定义组件用自闭合写法，改成显式的闭合标签就行，修改后的挂载节点代码如下：

<div class="rbox" id="app">
  <div>
    <h1>Runway 1</h1>
    <rwy id="rwy07C25C" rwy1="07C" rwy2="25C"></rwy>

    <h1>Runway 2</h1>
    <rwy id="rwy07R25L" rwy1="07R" rwy2="25L"></rwy>
  </div>
</div>

补充：自定义组件的自闭合写法只有两种场景能用不会出问题：一是写在.vue单文件组件里，二是作为字符串传给template选项交给Vue直接解析。这两种场景都不会让浏览器提前解析HTML结构，自然不会出现标签被错判的问题。

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