Vue3使用defineCustomElement创建的自定义组件如何访问shadowRoot？

分两种场景处理：

场景1：在Panel.ce.vue组件内部访问shadowRoot #

• 选项式API写法：直接通过实例属性this.$el获取自定义元素宿主，再取shadowRoot即可
  示例代码：

  export default {
    mounted() {
      const shadowRoot = this.$el.shadowRoot
      // 滚动到底部逻辑示例
      const scrollEl = shadowRoot.querySelector('.你的滚动容器类名')
      scrollEl.scrollTop = scrollEl.scrollHeight
    }
  }
  

• <script setup>写法：通过getCurrentInstance获取实例后再取
  示例代码：

  import { getCurrentInstance, onMounted } from 'vue'
  
  const instance = getCurrentInstance()
  onMounted(() => {
    const shadowRoot = instance?.proxy?.$el.shadowRoot
    const scrollEl = shadowRoot.querySelector('.你的滚动容器类名')
    scrollEl.scrollTop = scrollEl.scrollHeight
  })
  

场景2：在自定义组件外部访问shadowRoot #

直接用原生DOM选择器获取<panel-custom>元素实例后取shadowRoot即可，注意要等自定义元素注册、挂载完成后再操作：

// 确保自定义元素已经注册完成
window.customElements.whenDefined('panel-custom').then(() => {
  const panelElement = document.querySelector('panel-custom')
  const shadowRoot = panelElement.shadowRoot
  // 执行滚动逻辑
})

注意事项 #

• 只有defineCustomElement默认开启Shadow DOM的组件才能拿到shadowRoot，如果你手动配置关闭了Shadow DOM则无法获取该属性。
• 所有操作必须在DOM挂载完成的生命周期之后执行，否则会拿到null。

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