Vue.js 中组件的 $el 属性为什么会返回空文本节点？

问题原因 #

这个问题是Vue 2版本的模板解析逻辑导致的：
Vue 2的模板编译器默认会保留模板中的空白字符（包括<template>标签和内部根标签之间的换行、缩进空格），你写的模板里<custom-child>标签和外层<template>标签之间有换行和缩进内容，这段内容会被解析为一个独立的空白文本节点。
此时你的组件实际被解析出了两个并列的根节点：第一个是空白文本节点，第二个才是<custom-child>对应的DOM元素。而Vue 2中如果组件模板存在多个隐式根节点，this.$el默认会指向第一个根节点，所以你打印拿到的就是空文本节点，需要取相邻的下一个元素才能拿到目标组件元素。
该问题在Vue 3中不存在，因为Vue 3默认开启空白字符压缩，同时显式支持多根组件，$el的指向逻辑也做了对应调整。

常见解决方法 #

• 直接简化模板写法，去掉<template>和内部根标签之间的换行和缩进，确保模板只有一个明确的根节点：

<template><custom-child></custom-child></template>

• 配置Vue编译器的空白字符压缩规则：在项目构建配置中添加compilerOptions: { whitespace: 'condense' }，开启后编译器会自动移除不必要的空白节点，不会生成额外的文本根节点。
• 给自定义组件外层套一个包裹元素（比如<div>），显式指定唯一根节点，此时this.$el会指向这个包裹元素，取它的第一个子元素即可拿到目标组件元素。

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