获取 vue3 composition api shadowroot 的参考

Question

如何使用 vue3 composition api 获取对 web 组件 shadowroot 的引用？

使用 Options api 可以：

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

我尝试使用 getCurrentInstance() 获取它，但无济于事：/

非常感谢任何提示 =)

让它工作：

厕所：

<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
})