BEM 在 Shadow DOM 中失效，因其依赖全局作用域而 Shadow DOM 隔离样式；应转为内部命名约定，用 :host 和自定义属性替代修饰符，CSS 变量暴露定制点。
不能直接用 BEM 的常规方式写 Shadow DOM 样式——因为 BEM 依赖全局类名层级与选择器穿透，而 Shadow DOM 默认阻断外部样式、内部样式也默认不继承文档上下文，.block__element--modifier 这类纯类名规则在 shadow tree 内部虽可照写，但“语义隔离”和“作用域边界”会让 BEM 的原始设计意图失效。
为什么 BEM 在 Shadow DOM 里会“失语”
BEM 的核心是靠命名约定解决 CSS 全局污染和组件复用问题，但它假设所有类名都在同一作用域下可被任意选择器匹配。Shadow DOM 打破了这个前提：
-
:host和::slotted()是唯一能跨边界通信的伪类，BEM 类名本身无法触发跨 shadow boundary 的样式传递 - 外部文档中写的
.my-card__header对 shadow 内部元素完全无效，哪怕结构一模一样 - 组件内部若用 BEM 命名，只是“看起来像 BEM”，但无法和外部 BEM 工具链（如
bem-cn、PostCSS 插件）协同生成/校验修饰符逻辑 - 当多个
<my-card>实例并存时，每个 shadow root 都有一套独立的.my-card__body，此时 BEM 的“块级复用”优势被 shadow 封装稀释了
如果坚持用 BEM 风格，只在 shadow 内部写，该怎么组织
可以保留 BEM 的命名习惯，但必须放弃它对外部协作和工具链的依赖，转为一种内部可读性约定：
- 所有样式必须定义在 shadow root 内部，用
<style>或adoptedStyleSheets - 块名（block）建议与自定义元素名对齐，比如
<my-card>对应.my-card，避免用.card这类泛化名 - 元素（element）和修饰符（modifier）仅用于内部结构区分，不暴露给外部，例如：
.my-card__title、.my-card__content--compact - 不要试图用 BEM 处理 slot 内容样式——slot 里的内容属于 light DOM，需用
::slotted(*)或::slotted(.some-class)控制，且无法使用--modifier这类后缀做条件渲染 - 若需动态切换修饰符，用 JavaScript 操作
this.classList.toggle('my-card--loading')，再配合:host(.my-card--loading) .my-card__spinner来驱动样式
更推荐的替代方案：用 :host + 自定义属性代替 BEM 修饰符
Shadow DOM 原生提供了比 BEM 更轻量、更语义化的状态表达方式：
立即学习“前端免费学习笔记（深入）”；
- 把 BEM 修饰符转成 HTML 属性，例如
<my-card size="large" theme="dark">，然后在 shadow style 中用:host([size="large"])匹配 - 用 CSS 自定义属性（
--my-card-padding）暴露样式钩子，让使用者通过style="--my-card-padding: 24px"覆盖，比写.my-card--padded更灵活 - 对插槽内容做样式控制时，优先用
::slotted([slot="header"])而非::slotted(.my-card__header)，因为 slot 属性是 light DOM 唯一可靠锚点 - 避免在 shadow 内部大量嵌套 BEM 选择器（如
.my-card__header .my-card__title span），改用:host > .my-card__header > .my-card__title显式限定层级，防止意外命中 slot 注入内容
容易被忽略的关键点
很多人以为只要 class 名写得像 BEM，就能沿用原有工作流——但真正卡住的是构建时的 CSS 提取、source map 映射、以及 SSR 中 shadow DOM 不生效导致的样式丢失。如果你的项目已重度依赖 PostCSS-BEM 插件或 CSS-in-JS 的 BEM 生成器，迁移到 Shadow DOM 后这些能力基本归零；与其强行适配，不如把 BEM 的思维收敛到命名规范层，把状态表达交给 :host 和自定义属性，把样式定制权交给 CSS 变量——这才是 Shadow DOM 设计者真正想让你用的方式。
