Shadow DOM样式无法被外部穿透，BEM仅用于Light DOM类名隔离；跨边界需用::part()、::slotted()或CSS变量，且必须显式声明part属性并注意浏览器兼容性。
Shadow DOM外部样式无法穿透，BEM不是解药而是隔离手段
Shadow DOM的样式隔离是浏览器原生行为，::part()、::slotted() 或 CSS 变量才能跨边界通信。BEM 本身不解决穿透问题，它只管“外部怎么写类名才不撞车”——也就是说，BEM 是为 Light DOM（宿主元素及其外层）服务的，不是为 Shadow DOM 内部样式设计的。
常见错误现象：在宿主元素上写 <my-button class="btn btn--primary"></my-button>，同时又期望这个 btn--primary 能直接作用于 Shadow DOM 里的 <button></button>。结果样式完全不生效，因为类名根本没传进去，也没被暴露。
- BEM 类名只存在于 Light DOM，Shadow DOM 默认看不见它们
- 如果你没在组件内部用
part="btn"显式声明，外部写my-button::part(btn)也无效 - 把 BEM 当作“让外部样式自动进 Shadow”的捷径，是典型误解
真正该用BEM的地方：宿主元素与第三方库包裹层
当你的 Web Component 需要嵌入到已有 UI 框架（如 Ant Design、Element Plus）或老项目中时，BEM 命名能防止宿主元素类名污染全局样式表，也能帮你安全地包裹第三方组件。
使用场景举例：一个 <date-picker-wrapper></date-picker-wrapper> 组件，内部用的是 <datepicker></datepicker>（来自 Ant Design）。你不控制它的输出类名，但你能控制自己的容器。
立即学习“前端免费学习笔记（深入）”；
- 给宿主元素加 BEM 块名：
<date-picker-wrapper class="myapp-date-picker"></date-picker-wrapper> - 所有自定义样式都以
.myapp-date-picker开头，比如.myapp-date-picker__input、.myapp-date-picker__trigger - 第三方组件的类（如
.ant-picker）必须被包裹在.myapp-date-picker下，避免泄漏影响其他页面 - 如果构建工具启用了 CSS Modules 或
<style scoped></style>，记得对第三方类加:global(.ant-picker)或注释/* webpackMode: "global" */
想让外部 BEM 类影响 Shadow DOM？只能靠显式暴露 + ::part()
如果你确实需要外部通过 BEM 类（比如 .button--large）来定制 Shadow DOM 内部某块区域的样式，唯一合规路径是：组件作者主动用 part 属性标记可定制节点，并配合 ::part() 伪元素。
示例代码片段：
<!-- 组件内部 Shadow DOM --> <button part="root">Click</button> <span part="label">Submit</span>
外部 CSS 就可以这样写：
my-button::part(root) {
padding: 12px 24px;
}
my-button::part(label) {
font-weight: 600;
}
-
part名建议用 BEM 风格命名（如button__label），便于外部理解结构 - 不要指望
.my-button__label这种类名自动生效；::part()不认普通类名，只认part属性值 - 注意兼容性：
::part()在 Safari 17.4+、Chrome 105+、Firefox 119+ 支持，旧版需降级用 CSS 变量或属性传参
容易被忽略的细节：BEM 前缀和 Shadow DOM 的加载时机
很多人在 connectedCallback 里动态插入 <link rel="stylesheet"> 引入 UIKit 或 Bootstrap，再配合 BEM 类名渲染内容。但若外部样式表还没加载完，DOM 已渲染，UI 就会闪一下——BEM 类名存在，但框架样式缺失，导致视觉错乱。
- 别依赖
innerHTML = `...<link>...`的同步加载；<link>是异步资源，浏览器不会等它 - 更稳的做法：用
fetch+CSSStyleSheetAPI 动态注入，或提前在文档 head 中加载好框架 CSS（哪怕只用于 Web Components） - BEM 块名若带版本号（如
ui-kit-v3__button），要确保 Shadow DOM 内部引入的 CSS 版本一致，否则类名对不上规则 - 构建时若用了 PostCSS 自动添加前缀，确认它没误处理
::part()选择器（某些插件会把它当成非法语法跳过）
