如何在Vue3 Composition API中获取Web Components的shadowRoot引用

使用Options API时可以通过如下代码实现：

<script>
export default {
  mounted() {
    const shadowRoot = this.$el.parentNode
  }
}
</script>

最初尝试用getCurrentInstance()获取没有成功，下面是经过验证的可行实现方案：

可行实现方案 #

Web Component（WC）代码： #

<script setup lang="ts">
import { useWindi } from '../use/useWindi'
defineProps<{ title: string }>()
useWindi()
</script>

自定义hook代码： #

import { ref, onUpdated, onMounted, getCurrentInstance } from 'vue'

export const useWindi = () => {
  const shadowRoot = ref<ShadowRoot>()

  onUpdated(() => {
    if(!shadowRoot.value) return
    shadowRoot.value.adoptedStyleSheets = [(window as any).windiSheet];
  })

  onMounted(() => {
    shadowRoot.value = getCurrentInstance()?.vnode?.el?.parentNode
    if(!shadowRoot.value) return
    shadowRoot.value.adoptedStyleSheets = [(window as any).windiSheet];
  })
}

该实现的核心需求是在自定义组件中引入windicss样式表，通过将全局的windi样式表挂载到shadowRoot的adoptedStyleSheets属性，实现Windi CSS在Shadow DOM中的样式生效。

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