Vue3 Web Components的Shadow DOM下getElementById返回null问题咨询

Shadow DOM的核心特性就是DOM隔离，Web Component内部的DOM树和全局的document DOM树是完全独立的两个作用域：

• document.getElementById()只能查询全局DOM树里的节点，无法穿透Shadow DOM边界查找组件内部的元素，你代码里id为test的div是放在自定义组件的Shadow DOM内部的，所以全局查询必然返回null。
• Vue的defineCustomElement方法默认会把组件模板渲染到Shadow Root里，这就是你遇到问题的根本原因。

1. 优先使用Vue模板引用（最推荐） #

Vue本身提供了模板引用机制，不需要手动操作DOM查询，直接拿到元素实例，完全适配Web Component场景，修改Test.vue代码即可：

<template>
  <div ref="testRef" id="test">Hello World!</div>
</template>

<script lang="js">
import {
    ref,
    onMounted
} from "vue";

export default {
    setup(props) {
        const testRef = ref(null)
        onMounted(() => {
            // 直接拿到对应元素
            console.log(testRef.value);
        });
        return { testRef }
    }
}
</script>

2. 通过shadowRoot查询（适配第三方库场景） #

可以通过shadowRoot实现元素查询，你也可以将Shadow Root实例传给第三方库作为查询根节点，替代全局document就能正常找到元素，示例代码如下：

import { getCurrentInstance, onMounted } from 'vue'

export default {
  setup(props) {
    onMounted(() => {
      const vm = getCurrentInstance()
      const shadowRoot = vm?.root.$el.shadowRoot
      // 从shadowRoot查询即可拿到对应元素
      console.log(shadowRoot.getElementById('test'))
    })
  }
}

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