电商侧边栏需防三重样式污染，应采用data-component属性隔离、postcss重写类名、shadow dom封闭模式及视觉隐藏替代display:none。
为什么直接写
电商侧边栏不是“写个 aside 标签就完事”，它一上线就面临三重污染：第三方 UI 库的 .el-menu-item 全局生效、宿主页的 body a:hover 覆盖链接颜色、多个子应用共用同一份导航模板导致 id="category-1" 重复。浏览器只按 CSS 特异性算样式，ul li a 这种低权重选择器，在大型项目里等于裸奔。
- 别指望
class="sidebar"能挡住外部样式——它只是个普通类名，nav .sidebar a和.sidebar a在全局作用域里毫无防护力 - 用
data-component="sidebar-nav"替代class="sidebar"，JS 定位稳定（document.querySelectorAll('[data-component="sidebar-nav"]')），CSS 构建时也能自动加前缀 - 禁止在 HTML 里写
style="width: 240px"或onclick="toggleSubmenu()"，结构层一旦掺杂样式或行为，后续改主题或加埋点就得翻遍所有 HTML 文件
PostCSS + css-loader 是轻量隔离的底线配置
Shadow DOM 是终极方案，但多数电商系统还没到那个阶段；现阶段最可行的是构建时重写类名，让 .submenu 变成 [data-component="sidebar-nav"] .submenu，靠特异性压制外部规则。
-
postcss-css-namespace插件必须配{ namespace: '[data-component="sidebar-nav"]' }，否则只是心理安慰 -
css-loader的modules: { mode: 'local' }必须启用，否则import styles from './Sidebar.module.css'仍会输出全局类 - 禁用
@import和相对路径（如url(./arrow.svg)）——构建工具无法重写这些路径，资源 404 是高频问题 - 第三方库（如 Element Plus）的
.el-submenu无法被自动重命名，得手动包裹：<div data-component="sidebar-nav"><el-menu>...</el-menu></div>，再用:deep(.el-submenu)（Vue）或[data-component="sidebar-nav"] .el-submenu（纯 CSS）限定作用域
attachShadow({ mode: 'closed' }) 是唯一真隔离，但得绕开三个坑
想彻底免于 normalize.css 拉低行高、body * { box-sizing: border-box } 强制继承、第三方脚本注入 style 标签，attachShadow({ mode: 'closed' }) 是唯一硬解——但它不是加个属性就生效。
- 必须在自定义元素的
constructor()里调用，写在connectedCallback()就晚了：DOM 已渲染，样式已计算，污染不可逆 -
shadowRoot.innerHTML = htmlString是危险操作——内联<style></style>会漏出到全局，<script></script>在全局上下文执行，可能污染window - 正确注入样式：用
DOMParser解析 HTML 字符串，提取<style></style>内容，转成CSSStyleSheet实例，再赋给shadowRoot.adoptedStyleSheets = [sheet] -
adoptedStyleSheets不支持@import和相对路径，url(./icon.png)得提前fetch并重写为绝对路径，否则图标全挂
移动端收起侧边栏不能用 display: none
电商侧边栏在小屏常需收起，但 display: none 会让键盘 Tab 焦点直接跳过整个区域，违反 WCAG 2.1 可访问性底线，且内部图片仍会加载、布局仍会计算。
- 改用视觉隐藏：
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; - 保留 DOM 结构和语义：仍用
<nav aria-label="商品分类导航"></nav>，哪怕视觉上不可见 - 用
<template></template>封装侧边栏 HTML 片段，需要时才template.content.cloneNode(true)插入，避免提前解析样式、加载图片字体 - 远程加载的 HTML 字符串，务必先创建
template元素再设innerHTML，否则<img src="logo.png">的路径会相对当前页面而非片段所在目录
复杂点不在怎么写，而在谁负责清理：构建工具要校验所有 attachShadow 是否带 { mode: 'closed' }，CI 流程要拦截未加 data-component 的模块根节点，否则一个疏漏，整条侧边栏链路就暴露在全局样式风暴里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
