Vue项目中如何获取index.html内挂载元素的属性？解决Web Components Shadow DOM导致CSS变量无法外部覆盖的问题

我来帮你解决这个问题——其实完全不需要用Web Components就能实现需求，还能避免Shadow DOM带来的样式隔离问题，下面给你两种简单可靠的方法：

方法一：在main.js中获取属性并传递给根组件 #

这种方法适合希望把属性值作为根组件props传入的场景，逻辑清晰且符合Vue的组件传值规范：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

// 先获取挂载元素及其属性值
const appElement = document.getElementById('app');
const targetPropValue = appElement.getAttribute('thisIsAProp');

// 将属性值作为props传给根组件App
createApp(App, {
  mountedElementProp: targetPropValue
}).mount('#app');

然后在App组件中接收这个props：

<!-- App.vue (组合式API) -->
<script setup>
// 定义接收的props
const props = defineProps({
  mountedElementProp: String
});

// 使用属性值
console.log('挂载元素的属性值：', props.mountedElementProp);
</script>

方法二：在App组件内直接获取挂载元素 #

如果不想在main.js里处理，也可以在App组件的生命周期钩子中直接查询DOM获取属性：

<!-- App.vue (组合式API) -->
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // 组件挂载完成后，直接获取#app元素的属性
  const appElement = document.getElementById('app');
  const targetPropValue = appElement.getAttribute('thisIsAProp');
  
  console.log('挂载元素的属性值：', targetPropValue);
});
</script>

小提示：符合HTML规范的自定义属性 #

建议把自定义属性改成data-*格式（比如data-initial-value），这样更符合HTML标准，获取的时候可以用appElement.dataset.initialValue或者getAttribute('data-initial-value')，代码更规范。

为什么这个方案能满足CSS变量需求？ #

因为这两种方法都没有使用Web Components的Shadow DOM，Vue应用的DOM元素直接存在于父页面的常规DOM树中，父页面定义的CSS变量可以直接穿透到Vue应用的所有元素中，完美解决了你需要父页面覆盖CSS变量的需求。

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