shadow dom 通过影子边界实现样式与结构硬隔离：选 open 模式便于调试；样式须注入 shadowroot，禁用全局 css；用 :host 和 ::slotted 精准控制穿透；dom 查询天然受限，但 js 环境仍共享。
用 Shadow DOM 实现组件级别的样式私有化隔离与原始结构保护，核心在于利用浏览器原生的影子边界（Shadow Boundary）机制——它不是靠 CSS 命名约定或优先级博弈，而是从样式计算和 DOM 查询两个层面做硬性隔离。关键不在于“写得多严密”，而在于“是否落在规范路径上”。
选对 mode：open 是默认且推荐的选择
调用 attachShadow({ mode: 'open' }) 后，element.shadowRoot 可被正常访问，DevTools 能直接展开 shadow root 查看结构与样式，调试、测试、协作都顺畅。closed 模式虽屏蔽 shadowRoot 属性，但无法真正阻止有心人通过事件监听、原型重写等方式探测内部，反而让日常维护陷入黑盒困境。只有极少数强审计场景（如金融级 UI 基建）才需 closed，且必须配套暴露明确 API。
样式必须内置于 Shadow DOM 内部
所有样式规则必须注入到 shadowRoot 中，才能生效且不泄漏：
- 用
shadowRoot.innerHTML = '<style>...</style>...'最直观，但注意：<style></style>标签会被解析为普通 HTML 节点，不参与 CSSOM，动态更新时易出问题 - 更健壮的方式是创建
CSSStyleSheet实例，再通过shadowRoot.adoptedStyleSheets = [sheet]注入；Chrome/Firefox 支持replace()动态更新，Safari 17.4+ 才稳定支持该 API - 禁止在
中引入第三方 CSS（如 Foundation、Font Awesome），否则样式仍会全局污染；应把<link>标签放入 shadowRoot 内部，并确保 crossorigin 等属性正确
用 :host 和 ::slotted 精准控制边界穿透
Shadow DOM 默认完全封闭，但可通过两个规范机制有限、可控地开放接口：
-
:host仅匹配宿主元素自身（如<my-button></my-button>这个标签），适合设置 display、margin、尺寸、禁用态等容器级样式，例如：:host([disabled]) { opacity: 0.4; } -
:host-context(.dark-theme)检测祖先链中是否存在匹配选择器（如<my-button></my-button>），是主题透传唯一可靠方式；:host(.dark-theme)错误地只查宿主自身 class -
::slotted(*)只作用于传入<slot></slot>的顶层 light DOM 子节点，且仅允许继承性样式（color、font、line-height 等），不可设 margin、display、position —— 布局责任应由使用者承担
结构保护靠边界，不靠隐藏
Shadow DOM 天然阻断外部 JS 对内部节点的直接访问：document.querySelector('.internal-btn') 查不到 shadow 内的按钮，host.querySelector('.internal-btn') 也无效，必须走 host.shadowRoot.querySelector(...)。这种 DOM 封装是强制的，无需额外封装逻辑。但要注意：JavaScript 执行环境并未隔离，document、window、事件冒泡等仍可穿透，若需完整逻辑隔离，需配合 Custom Elements 生命周期、显式设置 composed: false 事件、避免全局变量污染等主动约束措施。
