Vue模板中使用<object>标签出现异常渲染的原因是什么？

核心触发逻辑 #

这个问题本质是浏览器原生HTML解析规则与Vue模板编译流程的冲突，和Vue的虚拟DOM渲染逻辑无直接关联：

• <object>、<applet>属于HTML规范定义的特殊可替换内嵌元素，浏览器在解析模板字符串时，会对这类标签执行特殊的上下文边界校验
• 当这类标签直接写在自定义组件（本例为<g-input>）内部、作为待透传的插槽内容时，解析器会错误提前匹配标签的闭合位置，打乱原本的节点层级关系
• 结合你给出的g-input组件结构可以看到，插槽的挂载点在.confirm-button的div容器内部，原本的设计是把传入的发送图标放在按钮位置，但因为上述解析问题，<object>节点根本没有进入这个容器，最终表现就是实际渲染的异常效果：图标脱离按钮容器约束、宽高不符合代码中预设的200px参数，直接挤占页面布局空间

可落地解决方案 #

• 给插槽内的<object>外层包裹一个普通原生块级容器，用普通div隔开<object>与自定义组件的解析边界，从根源上避免解析器的错误截断，参考代码：

<g-input v-model="message" :maxLength="80" @submit="sendMessage">
  <div class="send-icon-box">
    <object type="image/svg+xml" data="assets/send-icon.svg" width="200" height="200">
      <img src="assets/send-icon.png" width="200" height="200" alt="image format png" />
    </object>
  </div>
</g-input>

• 优先简化实现逻辑：现代浏览器已经原生支持直接通过<img>标签引用SVG格式资源，完全不需要依赖<object>做格式兼容降级，直接替换为img标签即可绕开所有原生解析的坑
• 如果必须保留<object>的降级兼容能力，可以通过Vue渲染函数手动创建object对应的虚拟节点，绕过模板字符串层面的浏览器解析环节，将创建好的节点通过插槽传入子组件

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