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

// Wrapper.vue

<템플릿>   <스크립트 lang="ts" 설정> 수입 { 정의프로프스, 심판, 보다, 사용속성, 마운트됨, 마운트 해제됨, getCurrentInstance, } "vue"에서;; const 소품 = 정의Props({ 이름: { 유형: 문자열, 기본값: "" }, zIndex: { 유형: 숫자, 기본값: 0 }, }); const attrs = useAttrs(); const inst = getCurrentInstance(); const 관찰자 = ref(널); 보다( () => [props.zIndex, 소품.이름], () => { setBrothersAttrs(); } ); onMounted(() => { el = inst?.vnode.el; 만약 (엘) { if (!observer.value) 관찰자.값 = 새로운 MutationObserver(setBrothersAttrs); 관찰자.value.observe(el.parentElement, { childList: true }); } setBrothersAttrs(); }); onUnmounted(() => { if (observer.value) 관찰자.value.disconnect(); }); const setBrothersAttrs = () => { el = inst?.vnode.el; 어린이 = el?.parentElement?.children; if (el && 어린이) { for (let i = 0; i < children.length; i++) { bro = children[i]로 놔두세요; if (bro === el) 계속; bro.style.zIndex = props.zIndex; } } };
// Test.vue
 
<템플릿> 
 <래퍼 이름="wrapper1" :z-index="1">  
 <래퍼 이름="wrapper2" :z-index="2">   
 <래퍼 이름="wrapper3" :z-index="3">    
  <스크립트 lang="ts" 설정> "./Wrapper.vue"에서 래퍼 가져오기;;
// HTML 형식의 결과: 
 
  
  
 
     
<인용문> 
위 코드에서 볼 수 있듯이 Wrapper 컴포넌트는 빈 컴포넌트입니다. 그 목적은 슬롯["default"]에서 HTMLElements의 z-index를 설정하는 것입니다. 
  
안타깝게도 useSlots()["default"]에서 하위 요소를 찾을 수 없습니다. 그래서 저는 돌연변이 관찰자가 부모의 childList를 관찰하도록 하려고 했습니다. 
 
그 자체로는 잘 작동합니다(예제의 그림 1과 그림 2처럼). 그러나 여러 개의 Wrapper가 함께 래핑되면 서로를 덮게 됩니다(예제의 그림 3과 같이 Wrapper3에 의해 설정된 picture3의 z-index는 Wrapper1에 의해 덮어쓰기됩니다). 이는 동일한 상위를 공유하므로 상위의 하위 항목이 항상 동일하다는 의미입니다. 
 
이제 질문은 다시 "슬롯에 HTMLElement를 가져오는 방법"이 됩니다. vuejs 전문가가 저를 도와줄 수 있나요?