Shadow DOM 是唯一能真正隔离样式的原生方案，它通过 attachShadow 创建封闭根节点并配合 CSSStyleSheet + adoptedStyleSheets 实现样式沙箱，而非修复冲突；CSS Module 依赖构建工具，纯 HTML 中无效；无法用 Shadow DOM 时需用唯一 ID 提升选择器权重；UA 样式需显式重置。
Shadow DOM 是唯一能真正隔离样式的原生方案
纯 HTML 环境下不存在“样式注入冲突解决机制”——浏览器本身不提供运行时样式沙箱。所谓“解决”，本质是绕过全局 CSSOM，用 Shadow DOM 切断继承与层叠链。它不是“修复冲突”，而是让冲突根本不会发生。
关键动作只有两步：element.attachShadow({ mode: 'closed' }) 创建根节点，再手动注入样式。任何试图用 innerHTML 直接塞 <style> 的写法都无效，因为 Shadow DOM 不解析内联 <style> 标签，它被当作文本节点丢弃。
-
CSSStyleSheet+adoptedStyleSheets是现代首选：支持动态更新、可复用、不污染全局 - 兼容 fallback 必须用
document.createElement('style')并shadowRoot.appendChild()，但修改后需重新 append 才生效 - 第三方返回的含
<style>的 HTML 字符串，必须先用DOMParser解析，提取textContent再构造CSSStyleSheet，不能直接赋值给innerHTML
为什么 CSS Module 在纯 HTML 里完全失效
HTML 文件本身没有模块系统，import styles from './X.module.css' 这行代码在浏览器中直接报错或静默失败。CSS Module 不是 CSS 语法特性，而是构建工具（Vite/Webpack）在打包阶段做的类名哈希重写 + JS 注入动作。
你在 HTML 中写 <div class="button">，浏览器就按字面匹配全局 .button；而构建后的产物是 <div class="button__abc123">，这个转换过程发生在 JS 执行时，静态 HTML 里不可能存在。
立即学习“前端免费学习笔记（深入）”；
- 文件名必须带
.module.css后缀，否则构建工具当普通 CSS 处理 - 必须通过 JS 模块导入，
<link rel="stylesheet">引入的任何 CSS 都不触发模块化 - 最终类名由 JS 动态写入 DOM，写死
class="xxx"就等于放弃隔离
用选择器特异性硬扛冲突只适用于嵌入场景
当你无法控制宿主页面、又不能用 Shadow DOM（比如老 IE 或某些受限 iframe），唯一可行的是提升选择器权重。这不是优雅方案，而是防御性编码。
核心是用唯一 ID 包裹整个嵌入内容，所有样式前缀强制带上该 ID。例如宿主有 .nav a { color: blue; }，你写 #my-widget .nav a { color: red; }，ID 的 100 权重直接压倒对方的 class 组合。
- ID 必须全局唯一，推荐用带时间戳或哈希的命名，如
id="widget-8f3a9b" - 避免过度嵌套：写
#my-widget .header button而不是#my-widget > .container > .header > button，后者权重飙升且难维护 - 慎用
!important：它会破坏后续所有覆盖可能，尤其在组件组合时容易引发连锁问题
混合开发中最容易被忽略的 UA 样式陷阱
即使你用了 Shadow DOM 或高权重选择器，<a>、<button>、<input> 这些元素仍可能显示异常——不是你的样式没生效，而是浏览器 UA 样式（如 a { color: -webkit-link; }）优先级高于继承值。
UA 样式不是 bug，是规范行为。它不走继承链，也不受父级 color 影响，必须显式重置。
- 对可继承属性（
color、font-size），用a { color: inherit; } - 对 slot 投影内容，用
::slotted(a) { color: inherit; }，但注意margin、display等不可设 - 对顽固控件，最稳写法是
button { all: unset; color: inherit; }，然后手动补基础样式
真正的难点不在怎么写，而在意识到：你写的样式可能根本没机会参与计算——UA 样式早就在底层锁死了渲染路径。
