当我尝试开发一个Layer组件时发生了一些事情。代码如下：

• // Wrapper.vue*

<template>
  <slot v-bind="attrs"></slot>
</template>

<script lang="ts" setup>
import {
  defineProps,
  ref,
  watch,
  useAttrs,
  onMounted,
  onUnmounted,
  getCurrentInstance,
} from "vue";

const props = defineProps({
  name: { type: String, default: "" },
  zIndex: { type: Number, default: 0 },
});
const attrs = useAttrs();
const inst = getCurrentInstance();

const observer = ref<MutationObserver | null>(null);

watch(
  () => [props.zIndex, props.name],
  () => {
    setBrothersAttrs();
  }
);

onMounted(() => {
  let el = inst?.vnode.el;
  if (el) {
    if (!observer.value)
      observer.value = new MutationObserver(setBrothersAttrs);
    observer.value.observe(el.parentElement, { childList: true });
  }
  setBrothersAttrs();
});

onUnmounted(() => {
  if (observer.value) observer.value.disconnect();
});

const setBrothersAttrs = () => {
  let el = inst?.vnode.el;
  let children = el?.parentElement?.children;
  if (el && children) {
    for (let i = 0; i < children.length; i++) {
      let bro = children[i];
      if (bro === el) continue;
      bro.style.zIndex = props.zIndex;
    }
  }
};
</script>

• //Test.vue *

<template>
  <div class="test">
    <Wrapper name="wrapper1" :z-index="1">
      <img class="picture1" />
      <div class="inner">
        <Wrapper name="wrapper2" :z-index="2">
          <img class="picture2" />
        </Wrapper>
      </div>
      <Wrapper name="wrapper3" :z-index="3">
        <img class="picture3" />
      </Wrapper>
    </Wrapper>
  </div>
</template>

<script lang="ts" setup>
import Wrapper from "./Wrapper.vue";
</script>

• //结果为HTML：*

<div class="test">
  <img class="picture1" style="z-index: 1" /><!-- if no wrapper3, "z-index: 3" -->
  <div class="inner" style="z-index: 1">
    <img class="picture2" style="z-index: 2" />
  </div>
  <img class="picture3" style="z-index: 1" /><!-- if no wrapper3, "z-index: 3" -->
</div>

与上面的代码一样，组件Wrapper是一个空组件。它的目的是在slot[“default”]中设置HTMLElements的z索引。
不幸的是，我在useSlots（）[“default”]中找不到子元素。所以我试着让突变观察者观察父母的childList。
它可以单独工作（* 如示例中的picture 1和picture 2 *）。*但是当多个Wrapper Package 在一起时，它会覆盖彼此（ 就像示例中的picture 3一样，wrapper 3设置的picture 3的z索引被wrapper 1 * 覆盖）。**这意味着它们共享同一个父节点，因此父节点的子节点总是相同的。
所以现在的问题又变成了“如何在插槽中获取HTMLElements”。..任何vuejs大师可以帮助我吗？