Vue3组合式API中自定义组件内元素的访问方法

Vue自定义元素基于Web Components实现，默认会通过Shadow DOM隔离样式，所以获取内部元素时需要注意在Shadow DOM范围内查询。以下是几种针对性的解决方案：

方案1：优化模板refs的使用 #

如果之前用模板refs没满足需求，可能是没在正确的生命周期钩子中获取，或是没处理Shadow DOM的嵌套结构：

<script setup>
import { ref, onMounted, onUpdated } from 'vue'

// 定义根容器的ref
const containerRef = ref(null)

onMounted(() => {
  if (!containerRef.value) return
  
  // 直接修改根元素样式
  containerRef.value.style.padding = '16px'
  
  // 访问Shadow DOM内部的子元素
  const childEl = containerRef.value.shadowRoot.querySelector('.content-item')
  if (childEl) {
    childEl.style.color = '#2c3e50'
    childEl.classList.add('highlight')
  }
})

onUpdated(() => {
  // 组件更新后重新调整样式（适配数据变更后的DOM重渲染）
  if (containerRef.value) {
    // 这里可以处理更新后的样式逻辑
  }
})
</script>

<template>
  <div ref="containerRef" class="container">
    <div class="content-item">动态样式目标元素</div>
  </div>
</template>

核心注意：自定义元素的模板内容会被包裹在Shadow DOM中，必须通过ref.value.shadowRoot才能访问到内部DOM节点。

方案2：直接获取Shadow DOM根节点批量查询元素 #

如果不需要给单个元素加ref，可以通过组件实例获取Shadow DOM根，再批量查询元素：

<script setup>
import { getCurrentInstance, onMounted } from 'vue'

const instance = getCurrentInstance()

onMounted(() => {
  if (!instance?.vnode.el) return
  
  const shadowRoot = instance.vnode.el.shadowRoot
  // 批量获取同类型元素
  const allItems = shadowRoot.querySelectorAll('.list-item')
  allItems.forEach(item => {
    item.style.marginBottom = '8px'
  })
})
</script>

这种方式适合需要批量操作DOM的场景，无需逐个定义ref。

方案3：结合watch实现数据联动的样式修改 #

如果样式需要随响应式数据动态变化，可以用watch监听数据，联动修改DOM样式：

<script setup>
import { ref, watch, onMounted } from 'vue'

const isExpanded = ref(false)
const panelRef = ref(null)

watch(isExpanded, (newState) => {
  if (!panelRef.value) return
  
  const panelEl = panelRef.value.shadowRoot.querySelector('.expand-panel')
  if (panelEl) {
    panelEl.style.height = newState ? '200px' : '40px'
    panelEl.style.transition = 'height 0.3s'
  }
}, { immediate: true }) // 立即执行一次初始样式设置
</script>

关键注意事项 #

• 自定义元素默认启用Shadow DOM，不能用全局document.querySelector查询内部元素，必须在组件内部的Shadow DOM范围内查找。
• 优先使用Vue的响应式样式绑定（:class、:style）实现动态样式，仅在无法通过响应式绑定完成的复杂场景下，再用JS直接操作DOM。

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