必须用BEM类名，因其将模块归属、角色和状态编码进类名，解决Shadow DOM中语义模糊、调试困难、协作低效问题，而非仅防样式污染。
Shadow DOM 隔离的是样式作用域，不是类名语义
Shadow DOM 的样式封装机制只阻止外部 CSS 选择器匹配内部节点，但完全不干涉类名本身的存在或命名方式。BEM 类名（如 card__header--large）照常写在 Shadow DOM 内部的元素上，只是这些类名不会被外部样式表选中——这恰恰是 BEM 要解决的另一件事：让类名自己说清“这是谁的什么部分、处于什么状态”。
常见错误现象：Warning: class="btn" not found in stylesheet 这类提示根本不会出现，因为 BEM 不依赖外部样式注入；它只负责把语义编码进名字里，不管样式从哪来。
BEM 在 Shadow DOM 内部依然提供可读性与协作契约
即使样式被隔离，DOM 结构仍需人眼可读、工具可查、团队可对齐。没有 BEM，<div class="title"></div> 在 <user-card> 和 <post-preview> 里长得一样，但含义完全不同。
实操建议：
• 组件内所有 HTML 元素必须用 BEM 命名，例如 user-card__avatar、post-preview__meta
• 禁止嵌套 Element：user-card__avatar__icon 是错的，应为 user-card__avatar-icon
• Modifier 仅用于视觉/状态变更：user-card__avatar--loading 合法，user-card__avatar--flex-center 违反原则（布局逻辑应由 Block 控制）
BEM + ::part() 是跨 Shadow 边界的可控通信方式
想让外部通过 BEM 类控制 Shadow 内部某块样式？唯一合规路径是组件作者显式暴露 part 属性，并配合 ::part() 使用。
使用场景：
• 宿主元素写 <my-button class="button button--large">
• 组件内部按钮节点写 <button part="button">
• 外部 CSS 写 my-button::part(button).button--large { font-size: 1.25rem; }
注意：::part() 在 Safari 16.4+、Chrome 98+、Firefox 117+ 支持，IE 完全不支持；不能链式写 ::part(button)::before，伪元素必须直接挂在 part 上
BEM 在 SSR / 构建产物中仍是唯一稳定锚点
服务端渲染时 Shadow DOM 尚未激活，HTML 字符串里全是纯类名；构建后 grep button--disabled 能精准定位所有相关代码，而 .disabled 可能散落在十几个文件里。
容易踩的坑：
• 用 css-loader?modules 时，别让哈希破坏 BEM 可读性，配置 localIdentName="[name]__[local]--[hash:base64:5]" 保留原始结构
• Lit 或 Stencil 组件中，:host(.button--primary) 在某些 esbuild 版本下解析不稳定，优先用 .button.button--primary 作为 fallback
• 第三方库（如 Shoelace）输出的类名默认遵循 BEM，下游项目用 CSS Modules 映射时，styles['button__label'] 比 styles.label 更安全
立即学习“前端免费学习笔记（深入）”；
BEM 和 Shadow DOM 解决的是不同层面的问题：一个管“人怎么理解类名”，一个管“浏览器怎么应用样式”。真正容易被忽略的是——当团队开始用 Web Components，却没同步统一 BEM 命名规范，调试时看到一堆el-123__item，没人知道它属于哪个模块、是否该复用、改了会不会影响其他地方。 
