最轻量的CSS作用域隔离方案是用data-属性+后代选择器，如[data-comp="user-card"] .avatar；需注意空格、避免ID/全局类、控制优先级。
用 data- 属性 + 后代选择器限定作用域
直接给组件外层容器加唯一 data- 属性，所有样式都以前缀方式写，是最轻量、零构建依赖的隔离方案。它不改变 CSS 本身，只靠选择器层级约束生效范围。
常见错误是漏掉后代空格，比如写成 [data-comp="header"].title（会匹配任意位置的 .title），正确写法必须带空格：[data-comp="header"] .title（只匹配其内部）。
- 每个组件根元素加类似
data-comp="user-card"的属性 - CSS 中所有规则都以该属性为前缀，例如：
[data-comp="user-card"] .avatar { width: 40px; } [data-comp="user-card"] .name { font-weight: bold; } - 避免使用 ID 或全局类名（如
.btn）作为选择器起点，否则容易逃逸 - 注意 CSS 优先级：这种写法会略微提高特异性，但比
!important可控得多
启用 CSS Modules（React/Vue 等现代框架场景）
CSS Modules 不是标准 CSS，而是构建时将类名自动哈希重命名，并只在对应模块内生效。它解决的是“写了 .button 却意外覆盖了别人写的 .button”这类问题。
典型错误是把 CSS Modules 当普通 CSS 引入：用 import './style.css' 而不是 import styles from './style.module.css'，结果类名没被处理，照样全局污染。
立即学习“前端免费学习笔记（深入）”；
- 文件名必须含
.module.css（或.module.scss等）后缀才能触发处理 - JS 中通过对象解构使用：
className={styles.container}，不是字符串"container" - 需要构建工具支持（Webpack/Vite/Next.js 默认开箱即用；Create React App 从 v2 起原生支持）
- 想局部暴露某些类给外部使用？用
:global(.highlight)包裹，但要谨慎
用
Vue 的 scoped 是编译时注入唯一属性选择器（如 data-v-f3f2d1e4），让样式只对当前组件模板生效。它不依赖构建配置，但仅限 Vue SFC 场景。
容易踩的坑是子组件样式穿透失败——比如父组件用了 scoped，子组件的 div 却没带上对应属性，导致样式不生效。这时得用 ::v-deep 或 /deep/（已弃用）或 :deep()（推荐）。
-
对本组件 template 内的元素有效，对外部引入的子组件默认无效 - 要影响子组件内部结构，写成：
:deep(.child-button) { background: red; } - 想让某个样式“逃出” scope？用
:global(.reset)，适合重置第三方库样式 - 不要和 CSS Modules 混用，Vue 官方推荐优先用
scoped处理常规组件样式
Shadow DOM 是真正硬隔离，但成本高
Shadow DOM 提供浏览器原生的样式边界，外部 CSS 完全无法穿透，连 !important 都无效。但它意味着你要手动管理 DOM 插入、事件委托、样式注入，且不兼容老旧浏览器（IE 完全不支持）。
很多人以为挂个 attachShadow 就完事了，结果发现样式没加载、伪类失效、CSS 变量传不进去——根本原因是 Shadow Root 默认是 closed，且不继承外部样式上下文。
- 创建时显式设为
open：el.attachShadow({ mode: 'open' })，方便调试 - 样式必须手动注入到 Shadow Root 内：
shadowRoot.innerHTML = ''或用 - 想用外部 CSS 变量？需在 host 元素上定义，并在 shadow 内用
inherit或var(--color)接收 - 适合 Web Components、可复用 UI 库、或对隔离性有强要求的嵌入式小部件
