CSS Modules通过哈希化类名实现组件样式隔离，适用于React；2. Shadow DOM提供强隔离，适合Web Components；3. Vue等框架支持scoped样式，通过属性选择器限定作用域。
作用域控制实践">
在现代前端开发中，组件化是构建可维护应用的核心方式。但样式冲突一直是组件化过程中的常见问题——不同组件的样式可能因类名重复而相互影响。为解决这一问题，通过标签实现局部组件样式隔离是一种实用且高效的做法。
使用 CSS Modules 实现作用域控制
CSS Modules 不是原生 CSS 功能，而是一种在构建阶段将 CSS 类名进行哈希化处理的技术，从而确保每个组件的样式只作用于自身。
具体做法是在书写样式文件时使用 .module.css 后缀（如 Button.module.css），然后在组件中导入：
import styles from './Button.module.css';function Button() {
return <button className={styles.primary}>点击</button>;
}
构建工具（如 Webpack）会将 styles.primary 编译为类似 Button_primary__abc123 的唯一类名，避免全局污染。
利用 Shadow DOM 实现真正的样式隔离
Shadow DOM 是 Web Components 标准的一部分，它允许将一个独立的 DOM 树挂载到元素上，并与主文档 DOM 隔离，包括样式。
在原生 JavaScript 中创建 Shadow Root：
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
button { color: blue; }
</style>
<button>我的按钮</button>`;
}
}
customElements.define('my-component', MyComponent);
Shadow DOM 内部的样式不会影响外部页面，外部样式也不会轻易穿透进来，实现强隔离。
框架中的 scoped 样式支持
在 Vue 和 Svelte 等框架中，提供了 scoped 样式机制，通过属性标签自动限定样式作用范围。
例如，在 Vue 单文件组件中：
<template><div class="container">内容</div>
</template>
<style scoped>
.container { padding: 16px; }
</style>
编译后，Vue 会为组件节点添加唯一属性（如 data-v-f3f489d2），并将样式重写为 .container[data-v-f3f489d2] { padding: 16px; }，实现基于标签的选择器隔离。
基本上就这些。选择哪种方式取决于技术栈和隔离强度需求：CSS Modules 适合 React 项目，scoped 属性适合 Vue，而 Shadow DOM 提供最强的封装能力，适用于高复用性 Web Components。不复杂但容易忽略的是，始终优先让样式作用域尽可能局部化，减少维护成本。
