必须用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></user-card> 和 <post-preview></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 控制）

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

BEM + ::part() 是跨 Shadow 边界的可控通信方式

想让外部通过 BEM 类控制 Shadow 内部某块样式？唯一合规路径是组件作者显式暴露 part 属性，并配合 ::part() 使用。
使用场景：
• 宿主元素写 <my-button class="button button--large"></my-button>
• 组件内部按钮节点写 <button part="button"></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，没人知道它属于哪个模块、是否该复用、改了会不会影响其他地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！