html模板本身不提供样式作用域控制，真正的css隔离依赖vue构建工具链对scoped样式的编译转换，纯html环境只能靠id前缀和bem命名等手动约束实现有限隔离。
HTML模板本身不提供样式作用域控制
直接在<template></template>或<div>里写HTML结构，对CSS隔离毫无帮助。浏览器根本不认<code><template></template>标签里的样式——它只是个文档片段容器，内容不渲染、不参与样式计算。你把.btn { color: red }塞进<template></template>内部的<style></style>里，只要没被构建工具处理或没挂到DOM上，它就等于不存在；一旦挂载，照样全局生效。
scoped不是HTML属性，而是Vue编译器指令
很多人误以为<style scoped></style>是HTML标准特性，其实它只在Vue单文件组件（.vue）中由vue-loader或@vue/compiler-sfc识别并转换。纯HTML文件里写<style scoped></style>，浏览器直接忽略scoped这个布尔属性，CSS照常全局注入。
- 生效前提：必须走Vue构建流程，且
css-loader配置开启modules: { mode: 'local' }或Vue CLI默认启用scoped支持 - 失效场景：用
document.createElement('style')动态插入含scoped的字符串，不会触发任何转换 - 注意：Vue 3已废弃
/deep/，改用:deep(.child)，但依然只在SFC中有效
真正起作用的是构建时注入的data属性和选择器重写
所谓“作用域”，本质是构建阶段把.foo变成.foo[data-v-f3f3eg9]，再给对应DOM加data-v-f3f3eg9。这个过程完全依赖工具链，不是HTML模板能决定的。
- 如果你用Vite，确保
build.cssCodeSplit没关掉，否则多个组件的scoped样式可能合并成一个全局块 - 手动写
<div class="foo" data-v-f3f3eg9>没用——那个哈希值是编译时生成的，硬编码会失效 <li>第三方组件（如<code><el-button></el-button>）不走你的构建流程，它的.el-button类名不会被重写，所以父组件的:deep(.el-button)只是临时穿透，不是真隔离 - 给整个组件外层套唯一
id，比如<div id="user-profile-7a2f1"> <li>所有CSS规则强制前置该ID：<code>#user-profile-7a2f1 .header__title { ... } - 避免用
!important——它破坏可维护性，且无法解决多层嵌套覆盖问题 - BEM命名必须严格执行：
user-profile__avatar不能简写成avatar，否则跟其他组件的.avatar撞车
纯HTML环境唯一可行的防御是手动前缀+ID权重压制
没有构建工具、不用框架时，别幻想“模板自动隔离”。能靠的只有结构约束和选择器技巧。
真正的隔离从来不在模板里，而在你是否愿意为每个class名多打几个字符，以及是否坚持让构建工具替你做哈希重命名。漏掉任何一个环节，冲突就会在某个深夜部署后突然冒出来。
