如何在不重构自定义组件的前提下为其设置自定义属性

存在无需重构<Component>组件本身的实现方案，以下方案均不需要修改目标组件内部代码，按落地成本从低到高排列：

• 外层包裹原生标签承接属性
  零成本通用方案，直接在自定义组件外层套一层普通HTML标签，把自定义属性绑定在这个原生标签上即可，完全不影响组件原有运行逻辑：

  <div data-class="custom">
    <Component />
  </div>
  

  如果要求自定义属性必须直接落在组件自身渲染的DOM节点上，使用下面的方案。
• 挂载完成后通过ref手动操作DOM
  先给组件绑定引用，等组件挂载渲染完成后，拿到组件对应的根DOM节点，手动调用DOM API添加自定义属性，适配所有主流前端框架：

  <!-- Vue 示例 -->
  <template>
    <Component ref="compRef" />
  </template>
  <script setup>
  import { ref, onMounted } from 'vue'
  const compRef = ref(null)
  onMounted(() => {
    const rootDom = compRef.value.$el
    rootDom.setAttribute('data-class', 'custom')
  })
  </script>
  

  // React 示例
  import { useRef, useEffect } from 'react'
  export default function App() {
    const compRef = useRef(null)
    useEffect(() => {
      const rootDom = compRef.current
      // 若组件未做ref转发，可通过DOM选择器定位到组件渲染的目标节点
      rootDom?.setAttribute('data-class', 'custom')
    }, [])
    return <Component ref={compRef} />
  }
  

• 全局统一配置（适合批量场景）
  如果项目里大量组件都需要加自定义属性，不需要逐个修改组件，可以通过全局配置统一处理：
  • Vue框架下单根组件默认会自动透传未在props中声明的属性，属性丢失一般是因为组件是多根节点、或者显式设置了inheritAttrs: false，这种场景可以封装一个全局自定义指令，绑定到组件上时自动将传入的自定义属性挂载到组件渲染的根节点。
  • React框架下如果组件没有透传剩余props，可以封装通用高阶组件包裹目标组件，将传入的自定义属性自动绑定到组件渲染的根DOM节点，全程不需要修改原组件代码。

注意：如果组件内部存在异步渲染的DOM内容（比如延迟渲染的弹窗、懒加载模块），手动设置属性的时机需要延后到对应DOM渲染完成后再执行，避免拿不到目标节点。

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