shadow dom 中必须用 bem 类名，因其提供模块归属、角色和无歧义边界三重语义，解决调试难、协作难、集成难问题，而非防样式污染。
Shadow DOM 本身不解决类名语义混乱问题，BEM 不仅要写，而且比在 Light DOM 中更关键——它不是为了“防止样式污染”，而是为了让人能看懂、能调试、能协作。
Shadow DOM 里为什么必须用 BEM 类名
浏览器 DevTools 展开 Shadow Root 后，你看到的是一堆 <div>、<code><button></button> 和随机哈希类名（如 _a1b2c），没有上下文就无法判断哪个 .input 属于搜索表单、哪个属于地址编辑器。BEM 提供唯一可读线索：search-form__input 比 input-123 多出三重信息：模块归属（search-form）、角色（__input）、无歧义边界。
- Shadow DOM 隔离的是样式作用域，不是语义——
class="input"在隔离前后都一样模糊 - 外部系统集成（如 CMS 嵌入）依赖类名作为公开契约，
user-card__avatar是文档可写的 API，el-01不是 - 调试时靠类名定位，而不是靠 DOM 层级猜：“这个
<span></span>是不是 card 的副标题？”——有card__subtitle就不用猜
BEM 在 Shadow DOM 中容易踩的命名陷阱
最大的误区是把 BEM 当成“给 class 加前缀”的体力活，而忽略 Shadow DOM 的结构独立性。比如在 Shadow Root 内写 .header .logo 这种后代选择器，既违背 BEM 扁平原则，又浪费了原生隔离能力。
- 禁止跨 Block 复用 Element 名：
button__icon和card__icon必须是两个类，哪怕样式完全相同——复用逻辑应走 CSS 变量或@apply，而非共享类名 - Modifier 必须绑定到明确主体：
search-form--loading✅，search-form__input--loading❌（除非加载态是输入框自身状态，而非表单整体行为） - 避免在
<style></style>中用:host(.block--mod)覆盖 Modifier 语义，这会让block--mod失去独立性，变成依赖宿主的“伪修饰符”
如何在自定义元素中安全生成 BEM 类名
手动拼接 className 容易漏掉空格、重复 Modifier 或错位嵌套。尤其当组件支持多个状态（如 disabled + loading + small）时，字符串拼接极易出错。
- 用轻量函数封装，不引入大库：
bem('search-form', { disabled: true, loading: true }, { input: true })返回"search-form search-form--disabled search-form--loading search-form__input" - 函数内部应自动过滤 falsy 值，不生成
search-form--undefined这类无效类名 - 避免在模板中直接写
class="search-form${disabled ? ' search-form--disabled' : ''}"——可读性差，且难以复用 Modifier 组合逻辑
外部样式想影响 Shadow DOM？BEM 不是入口，::part() 才是
BEM 类名只存在于 Light DOM，Shadow DOM 默认看不见它们。你在宿主元素上写 <my-button class="btn btn--primary"></my-button>，Shadow 内部的按钮不会自动获得 btn--primary 样式——这跟 BEM 无关，是 Shadow DOM 的设计使然。
- 真正可控的穿透方式只有三种：
::part()（需组件内显式声明part="btn"）、::slotted()（仅对<slot></slot>内容生效）、CSS 变量（如--btn-bg） - 如果组件作者没加
part属性，外部写my-button::part(btn)无效；BEM 类名再规范也帮不上忙 - 想让外部通过 BEM 类定制内部样式？必须由组件作者决定暴露哪些部分，并配合文档说明，比如 “支持
my-button::part(icon)调整图标尺寸”
最常被忽略的一点：BEM 和 Shadow DOM 是两层事——前者管“人怎么读代码”，后者管“浏览器怎么渲染”。混淆二者，就会在 <style></style> 里写一堆 .host > .child，或者以为加了 mode: 'open' 就不用写语义类名。实际项目里，90% 的调试成本来自“看不懂这是谁的节点”，而不是“样式被覆盖了”。
