Shadow DOM 是唯一能真正隔离样式的原生方案，需在自定义元素 constructor() 中调用 attachShadow({ mode: 'closed' }) 创建封闭根节点，并通过 CSSStyleSheet + adoptedStyleSheets 注入样式，而非 innerHTML 拼接或全局 link 引入。
多级导航栏的 HTML 结构本身不产生样式隔离，nav、ul、li 这些标签在全局作用域里毫无防护力；真正决定是否冲突的，是 CSS 选择器写法、加载时机和 DOM 注入方式。
为什么
浏览器根本不关心你写的是 nav 还是 header，它只按 CSS 特异性（Specificity）和层叠顺序算样式。两个团队各自写了 .nav-item { color: blue }，后加载的 CSS 就覆盖前一个——哪怕都包在 nav 里。
- 第三方 UI 库（如 Ant Design、Element Plus）的
.el-menu-item是全局生效的，不会因为你把它塞进nav[data-subapp="admin"]就自动加前缀 -
ul li a这种低特异性选择器，极易被宿主页面的body a:hover或nav a覆盖 - 多个子应用共用同一份导航模板时，
id="dropdown-1"重复导致document.getElementById()返回错误节点
用 data-* + 构建时重写实现轻量隔离
手动加 data-nav="main" 没用，必须配合构建工具把所有类名重写成带前缀的形式，否则等于裸奔。
- PostCSS 插件
postcss-css-namespace配置{ namespace: '[data-nav="main"]' }，能把.submenu编译为[data-nav="main"] .submenu - Webpack 的
css-loader必须启用modules: { mode: 'local' }，否则import styles from './Nav.module.css'也会退化成全局类 - 禁止子应用直接
import 'normalize.css'—— 它重置的是body和ul，所有子应用都会被拉低行高、改掉 margin - 若用 Vue，
<style scoped>对<slot>内动态插入的内容无效，得靠:deep(.el-submenu)显式穿透，但仅限必要场景
Shadow DOM 是唯一真隔离，但得接受代价
想让导航栏彻底免于外部样式污染，attachShadow({ mode: 'closed' }) 是唯一硬解，但它不是“加个属性就完事”。
立即学习“前端免费学习笔记（深入）”；
- 必须在自定义元素的
constructor()里调用，延迟到connectedCallback已晚：DOM 渲染完成，样式已计算，污染不可逆 -
shadowRoot.innerHTML = htmlString是危险操作——内联<style>会漏出到全局，<script>在全局上下文执行 - 正确做法：用
DOMParser解析 HTML 字符串，提取<style>内容，转成CSSStyleSheet实例，再赋给shadowRoot.adoptedStyleSheets = [sheet] -
adoptedStyleSheets不支持@import和相对路径（如url(./arrow.svg)），这些资源需提前 fetch 并重写路径
避免滚动/交互状态下的图标错乱
导航栏图标（Logo、汉堡菜单）在滚动后切换失败，常见原因是 JS 直接写 el.style.color = '#333'，覆盖了 CSS 的 .nav-scrolled .logo 规则。
- 不要用
el.style.xxx改样式，统一用el.classList.toggle('scrolled')控制状态类 - 移动菜单展开/收起时，确保
scrolled类不被移除——常见错误是收起菜单时执行了nav.className = '' - 图标状态依赖于
window.scrollY，但 iOS Safari 滚动事件有延迟，建议用requestAnimationFrame节流，而非debounce - 若用
backdrop-filter做毛玻璃效果，必须加@supports (backdrop-filter: blur(1px))判断，旧版 Android 和 IE 全系不支持
最易被忽略的点：所有隔离方案都假设你控制着 HTML 注入入口。如果导航栏是通过 innerHTML += '' 动态拼接进去的，那前面所有 CSS 前缀、Shadow DOM、模块化都白搭——+= 会销毁已有事件监听器，且无法保留表单控件状态。
