BEM在Web Components中不是为样式穿透，而是解决语义混乱：card__title明确归属模块，便于调试、搜索和SSR兼容；需写入Shadow DOM内部节点，避免跨块选择器，并在构建中保留原始类名结构。
Web Components 里用 BEM 不是为了让样式“穿透” Shadow DOM，而是为了让人和工具能快速定位、协作和复用——它解决的是语义混乱，不是作用域问题。
为什么 Shadow DOM 里还要写 card__title 而不是 title？
Shadow DOM 隔离样式，但不隔离语义。class="title"在
- DevTools 里看到 user-card__avatar--large，立刻知道这是用户卡片的头像变体，不是全局 avatar 类的误用
- grep user-card__ 能精准匹配所有相关 HTML、CSS、JS 片段；搜 avatar 可能命中十几个组件，全靠猜
- 服务端渲染（SSR）或静态生成时，Shadow DOM 尚未激活，外部 CSS 仍需靠类名匹配 —— 此时 sl-dialog--open 比 is-open 更安全、更可预测
如何避免在 Lit/Stencil 组件中误用 BEM 类名？
BEM 类名必须出现在 Shadow DOM 内部的真实节点上，不能只挂在宿主元素上指望它自动“透传”。常见错误是写
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 手动同步：在
render()或connectedCallback()中把宿主类名解析后写入内部节点，比如 this.shadowRoot.querySelector('button').className = this.className - 更稳妥的做法是只在宿主上用 BEM 块名（如
my-button），内部元素用固定结构 +part属性暴露定制点：<button part="root">，再由外部用my-button::part(root)控制 - 禁止在组件内部写
.button--primary .button__icon这类跨块选择器 —— BEM 不允许依赖父级修饰符去控制子元素样式
怎么让 BEM 在 Web Components + CSS Modules 场景下不翻车？
CSS Modules 编译后会加哈希，但 BEM 的价值在源码阶段就该体现。如果构建流程抹掉了原始类名（比如 Vite + cssnano 合并了 button--primary 和 button--disabled），搜索和协作链就断了。
立即学习“前端免费学习笔记（深入）”；
- 确保构建配置保留原始类名结构：Vite 中禁用
cssnano的mergeLonghand和reduceTransforms - 开发阶段用
localsConvention: 'camelCaseOnly'，这样card__header编译成Card_header__abc123，但源码搜索仍可用card__header - JSX 中别拼字符串：
className={`${base}__${element} ${base}--${mod}`}容易漏空格或大小写错误；改用clsx(base, `${base}__${element}`, `${base}--${mod}`)
BEM 在 Web Components 中最易被忽略的一点：它不是给浏览器看的，是给人和工具链看的。命名一旦破规（比如写成 card__header__title 或 button-primary），编辑器跳转失效、自动化测试定位不准、Code Review 时没人能一眼看出语义断裂 —— 这些问题不会报错，但会在三个月后拖慢整个迭代节奏。
