Shadow DOM 是 Web Components 的核心技术，通过 attachShadow() 方法将隔离的 DOM 树挂载到宿主元素上，实现样式和结构的封装，防止全局样式污染与 DOM 冲突。其支持 open 和 closed 两种模式，分别允许或限制外部访问影子根；内部样式默认不泄露，可通过 :host、::slotted 和 CSS 变量等方式与外界通信，结合 Custom Elements 和 HTML Templates 构建高内聚、可复用的 UI 组件。
Shadow DOM 是 Web Components 的核心技术之一，它提供了一种将封装的 DOM 树附加到页面元素上的方式，同时隔离其内部结构、样式和脚本。在使用 JavaScript 创建 Shadow DOM 时，可以实现真正的组件级封装，避免全局样式污染和 DOM 冲突。
什么是 Shadow DOM
Shadow DOM 允许开发者创建一个与主文档 DOM 隔离的“影子”DOM 树。这个影子树挂载在一个宿主元素（host）上，其内部的 HTML 和 CSS 不会受到外部样式影响，外部也无法直接访问其内部节点。
这种隔离性使得组件更加健壮和可复用，特别适合构建高内聚、低耦合的 UI 组件。
如何创建 Shadow DOM
通过 JavaScript 的 attachShadow() 方法可以为任意元素挂载 Shadow DOM。该方法接收一个配置对象，其中 mode 字段决定封闭性：
立即学习“Java免费学习笔记（深入）”；
open：允许通过 JavaScript 从外部访问 Shadow Root closed：完全封闭，无法从外部访问内部结构
// 创建一个自定义元素并挂载 Shadow DOMclass MyComponent extends HTMLElement { constructor() { super(); // 挂载 Shadow DOM this.shadow = this.attachShadow({ mode: 'open' }); // 添加内部结构 this.shadow.innerHTML = ` p { color: blue; font-family: sans-serif; } 这是 Shadow DOM 中的内容
`; }}// 注册自定义元素customElements.define('my-component', MyComponent);
上面代码定义了一个名为 my-component 的自定义元素，其内容被封装在 Shadow DOM 中，样式不会泄漏到外部，也不会被外部样式覆盖。
样式与作用域隔离
Shadow DOM 最大的优势之一是样式隔离。在 Shadow Root 内部定义的 CSS 只作用于该组件内部，即使选择器是全局的（如 body、div），也仅限于当前影子树。
例如，在 Shadow DOM 中写 p { color: red }，不会影响页面其他地方的 p 标签。
如果需要从外部影响 Shadow DOM 的样式，可以通过以下方式：
使用 CSS 自定义属性（CSS Variables）传递主题色等配置 在 Shadow Root 中预留插槽（slot）供外部传入内容 通过 :host、:host-context 等伪类控制宿主元素样式
this.shadow.innerHTML = ` :host { display: block; border: 1px solid #ccc; padding: 8px; } :host([hidden]) { display: none; } ::slotted(span) { font-weight: bold; } `;
上面示例中，:host 控制组件自身外观，::slotted() 定义投影内容的样式。
封闭模式（Closed Mode）与安全封装
设置 mode: ‘closed’ 可以让 Shadow Root 无法被外部访问：
this.shadow = this.attachShadow({ mode: 'closed' });
此时，element.shadowRoot 返回 null，外部 JavaScript 无法操作影子内部结构，增强了封装性和安全性。
但要注意：浏览器开发者工具仍可能查看结构，且这不是严格的安全沙箱，不应依赖它防止恶意操作。
基本上就这些。Shadow DOM 结合 Custom Elements 和 HTML Templates，构成了现代 Web 组件的基础，让前端开发更模块化、更可维护。合理使用 open 或 closed 模式，能有效控制组件的封装程度与灵活性。不复杂但容易忽略的是样式边界和 slot 的使用，掌握好这些细节才能写出真正独立的组件。
以上就是JavaScript Shadow DOM封装的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529781.html
微信扫一扫 
支付宝扫一扫 
