结论是：组件库应使用 attachshadow({ mode: 'open' })，内联 并配合 :host 和 ::slotted 封装样式；closed 模式阻碍调试与集成，外部 css 无效，css 自定义属性可跨边界传递但需显式声明。
直接说结论：用 attachShadow({ mode: 'open' }) 创建 shadow root，把所有样式写进 <style></style> 并注入其中，再配合 :host 和 ::slotted 控制边界行为——这才是真正能落地、不翻车的模块化组件库样式封装路径。
为什么不能用 mode: 'closed' 上线组件库
封闭模式看似“更安全”，但实际会让调试、测试、第三方集成全卡死：element.shadowRoot 永远返回 null，DevTools 看不到内部结构，CSS 无法实时编辑，连 querySelector 都得靠猜类名绕路。只有极少数强审计场景（如金融级密码输入框）才需 closed，且必须配套暴露明确 API。绝大多数组件库选 open 是唯一务实选择。
<style></style> 必须内联到 shadow root，不能靠 <link> 或全局 CSS
外部 <link rel="stylesheet"> 在 shadow 内完全无效；全局 class（比如 button { background: red }）也匹配不到 shadow 内节点——这不是优先级问题，是浏览器压根不把外部规则纳入该 shadow tree 的样式计算队列。
- 最简单可靠的方式：在
constructor或connectedCallback中拼接字符串，用shadowRoot.innerHTML = `<style>...</style>` - 想动态换主题？创建
CSSStyleSheet实例，再赋值给shadowRoot.adoptedStyleSheets = [sheet]（注意 Safari 17.4+ 才稳定支持replace()） - 别把 Font Awesome 或 reset.css 放
里——它们会污染整个页面；真要用图标字体，把<link>塞进 shadow root 内部，并确保crossorigin正确
用 :host 和 ::slotted 而不是“强行穿透”
Shadow DOM 不是黑盒，而是有规范接口的边界。浏览器只承认两个穿透机制：
-
:host只作用于宿主标签自身，比如<my-button></my-button>，适合设display、margin、[disabled]状态样式 -
:host-context(.dark-theme)检测祖先链（如<my-button></my-button>），是主题透传唯一可靠方式；:host(.dark-theme)错误地只查宿主自己的 class -
::slotted(p)只影响 slot 分发的顶层 light DOM 元素，且仅允许继承性属性（color、font-size），不能设margin或display——布局责任应由使用者承担
容易被忽略的复杂点：事件流与 CSS 自定义属性共享
Shadow DOM 隔离的是样式和 DOM 查询，不是 JS 环境——this、window、document 都是共享的。事件默认不冒泡出 shadow boundary，要向外通信必须显式调用 this.dispatchEvent(new CustomEvent('click')) 并设 bubbles: true, composed: true。CSS 自定义属性（--my-btn-bg）则天然跨 boundary 传递，这是主题配置的推荐通道，但要注意它依赖宿主或祖先链上的声明，不是自动继承。
