Vue中如何为渲染组件指定自定义scope-id匹配外部scoped CSS

Vue scoped样式的匹配逻辑是：组件渲染时给对应DOM节点注入data-v-<hash>格式的属性，CSS选择器通过匹配该属性实现样式隔离。你已经提前拿到固定的scopeId，直接通过组件内置配置指定渲染时使用的scopeId即可，不需要Vue自动生成哈希值。

方法1：局部注册组件时指定scopeId（推荐，无兼容问题） #

局部注册Dell组件时，直接给组件配置挂载__scopeId字段，Vue渲染时会自动给组件所有DOM节点（包含动态渲染的v-if节点、子节点）注入对应属性，完全匹配你下载的CSS规则。
代码示例：

import Dell from './Dell.vue';
export default{
    name:'Main-Component',
    components: {
        Dell: Object.assign({}, Dell, {
            __scopeId: 'data-v-98b365f2'
        })
    }
}

方法2：全局注册时统一配置 #

如果Dell组件需要在项目多处复用，可以在全局注册时一次性配置scopeId，不需要每个使用的页面单独修改：

// 项目入口文件
import Dell from './Dell.vue';
// 全局指定scopeId
Dell.__scopeId = 'data-v-98b365f2';

// Vue3 全局注册
app.component('Dell', Dell);
// Vue2 全局注册
// Vue.component('Dell', Dell);

方法3：手动给DOM加属性（兜底兼容方案） #

如果遇到低版本Vue不支持直接配置__scopeId的场景，可以在Dell组件的生命周期钩子里手动给DOM节点注入属性：

// Dell.vue 脚本部分
export default {
    name: 'Dell',
    mounted() {
        // 根节点加属性
        this.$el.setAttribute('data-v-98b365f2', '');
        // 如果下载的CSS包含深度选择器对应的后代选择器，需要给所有子节点也加上属性
        this.$el.querySelectorAll('*').forEach(el => {
            el.setAttribute('data-v-98b365f2', '');
        })
    },
    updated() {
        // 处理v-if/v-for动态渲染的新节点
        this.$el.querySelectorAll('*').forEach(el => {
            if (!el.hasAttribute('data-v-98b365f2')) {
                el.setAttribute('data-v-98b365f2', '');
            }
        })
    }
}

提示：优先使用前两种配置__scopeId的方案，Vue原生会自动处理所有动态节点的属性注入，不会出现遗漏；手动加属性的方案需要额外处理动态渲染节点，仅作为兜底使用。

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