Shadow DOM 通过创建物理隔离的 DOM 子树实现样式与结构封装，需用 attachShadow({mode: 'closed'}) 创建封闭根，内联样式并利用 :host、::slotted 和 CSS 自定义属性可控透传，确保真正独立性。

用 shadow dom 实现 web components 的样式隔离与结构封装，关键在于创建一个物理隔离的 dom 子树，并让它的样式、结构、脚本彼此不越界。它不是靠约定或命名规范来防冲突，而是浏览器原生提供的硬性边界。

创建封闭的 Shadow Root

在自定义元素构造函数中调用 attachShadow()，并设 mode: 'closed'。这会让 element.shadowRoot 始终返回 null，从源头阻止外部 JS 意外读写内部结构，强化封装性。

• 避免用 'open' 模式上线——调试可以，生产环境建议封闭
• 必须在 constructor 或 connectedCallback 中调用，不能延迟到事件里
• 一个元素只能有一个 shadow root，重复调用会报错

样式必须内联注入，且作用域天然受限

所有样式要写进 shadow root 内部的 <style></style> 标签，不能依赖外部 CSS 文件或全局 class。浏览器自动确保：外部样式选不到 shadow 内节点，shadow 内样式也不会泄漏出去。

• 用 :host 给宿主元素（比如 <my-button></my-button>）设样式，支持状态伪类如 :host([disabled])
• 用 ::slotted(

  )

  控制插槽中直接子元素的样式，但注意它只对 slot 分发的内容生效，且规则必须写在 shadow 内
• 避免使用 ID 选择器——ID 在 shadow 内唯一即可，无需担心和页面其他 ID 冲突

通过 slot 和 CSS 自定义属性实现可控透传

完全隔离不等于完全封闭。合理暴露接口，才能让组件好用。

• 用 <slot></slot> 定义内容分发点，外部 HTML 可以把任意结构“投递”进来，保持语义和可访问性
• 用 CSS 自定义属性（--my-btn-bg: #007bff）接收外部主题配置，再在 :host 或内部样式中 var(--my-btn-bg) 使用
• 不推荐用 !important 强行覆盖外部样式——那违背了 Shadow DOM 的设计初衷

结构封装带来真正的 DOM 独立性

shadow tree 中的节点不会出现在 document.querySelectorAll 结果里，event.target 默认也只显示宿主元素，除非显式设置 composed: true。

• 组件内部可自由使用 id="inner-input" 或 class="helper"，无需加前缀
• 事件监听应绑定在 shadow root 上，而不是 document；需要向外通信时，用 this.dispatchEvent(new CustomEvent(...))
• 若需兼容老旧浏览器，可用 ShadyDOM polyfill，但注意它模拟的是行为，非真实隔离