BEM不能通过后代选择器为插槽内容提供作用域隔离，因其违背BEM核心契约：依赖DOM结构、不可迁移、性能差且归属不明；正确做法是插槽内容主动携带显式BEM类名或通过wrapper修饰符+限制性样式兜底。
插槽内容（slot content）本身不继承外层 BEM 类名，也不自动获得作用域隔离——这是 CSS 本身的能力边界，不是 BEM 能“继承”出来的。
为什么不能靠后代选择器把插槽内容纳入 BEM 作用域
常见错误是写 .card__content .button 去样式化插槽里传进来的 <button>。这直接违反 BEM 核心契约：.card__content .button 依赖 DOM 结构、无法迁移、匹配性能差，且一旦插槽内容换成 <a> 或加了其他 class，样式就断掉或误生效。
- 浏览器渲染时会回溯父级，深度 ≥4 就明显拖慢，尤其 SSR hydration 后动态插入节点时更敏感
- 插槽内容可能来自任意模块，
.button归属不明：是全局按钮？还是 card 专用？没人能从类名推断 - BEM 不是作用域机制，它不改变 CSS 级联规则；所谓“继承”，只是人脑对命名上下文的解读，不是浏览器行为
正确做法：用显式类名 + 修饰符承接插槽语义
插槽内容需要明确归属，就必须由内容提供方（或封装组件）主动带上符合上下文的 BEM 类名，而不是靠外层选择器“抓取”。
- 如果插槽预期是按钮，组件文档应明确要求传入
class="card__action card__action--primary"，而非裸<button> - 在 Vue/React 中，用
clsx或cn动态拼接：例如clsx('card__action', { 'card__action--disabled': isDisabled }) - 若插槽内容不可控（如 CMS 富文本、第三方组件），应在 wrapper 上加专用修饰符，比如
card__content--rich-text，再配独立样式块，避免污染主逻辑
第三方或富文本插槽怎么处理样式隔离
这类场景最易破规，因为无法约束传入的 HTML 结构和 class 名。硬套 .card__content > p 或 .card__content img 是权宜之计，但必须加限制：
立即学习“前端免费学习笔记（深入）”；
- 只用于基础排版重置（如
margin、line-height），禁用颜色、尺寸、交互类 - 用
:where()降权，避免干扰插槽内自带样式的权重判断：:where(.card__content) p - 绝对不要写
.card__content a:hover这类高风险选择器——插槽里可能有全局.link--external，一覆盖就全乱 - 真正需要定制的交互元素（如富文本里的操作按钮），应通过 slot props 或自定义事件交由父组件控制，而不是靠 CSS “猜”语义
最容易被忽略的一点：BEM 的“作用域”是靠类名自带上下文实现的，不是靠选择器嵌套模拟的。当你发现自己在调试插槽样式时反复打开 DevTools 查看父级 class 是否存在，说明已经把 BEM 当成了 CSS Modules 的替代品——它不是。
