获取对vue3组合api shadowroot的引用

Question

如何使用vue3 composition获取对web组件的阴影根的引用？

使用选项api可以做到以下几点：

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

我试着用getCurrentInstance()获取它，但是没有用:/

将非常感谢任何提示=)

让它工作起来：

WC：

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

钩子：

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样式表。

Answer 1

我想我明白了：

const shadowRoot = ref(null)

onMounted(() => {
  shadowRoot.value = getCurrentInstance().vnode.el.parentNode
})