Shadow DOM 实现样式隔离与组件封装详解
2026-05-17 08:03:39
0浏览
收藏
Shadow DOM 是浏览器原生提供的强大机制，通过创建物理隔离的 DOM 子树，真正实现样式、结构与脚本的硬性封装——外部样式无法穿透、内部样式不会泄漏、JS 无法越界访问（尤其在 `mode: 'closed'` 下），彻底摆脱命名冲突与样式污染的困扰；它要求样式内联注入、善用 `:host` 和 `::slotted` 控制宿主与插槽样式，并借助 `` 和 CSS 自定义属性实现安全、可控的内容分发与主题透传，让 Web Components 不仅独立可靠，更灵活可复用。
用 Shadow DOM 实现 Web Components 的样式隔离与结构封装，关键在于创建一个物理隔离的 DOM 子树，并让它的样式、结构、脚本彼此不越界。它不是靠约定或命名规范来防冲突，而是浏览器原生提供的硬性边界。
创建封闭的 Shadow Root
在自定义元素构造函数中调用 attachShadow()，并设 mode: 'closed'。这会让 element.shadowRoot 始终返回 null，从源头阻止外部 JS 意外读写内部结构，强化封装性。
- 避免用
'open'模式上线——调试可以，生产环境建议封闭 - 必须在
constructor或connectedCallback中调用，不能延迟到事件里 - 一个元素只能有一个 shadow root，重复调用会报错
样式必须内联注入，且作用域天然受限
所有样式要写进 shadow root 内部的
