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 DOM
class MyComponent extends HTMLElement {
constructor() {
super();
// 挂载 Shadow DOM
this.shadow = this.attachShadow({ mode: 'open' });
// 添加内部结构
this.shadow.innerHTML = `
这是 Shadow DOM 中的内容
`;
}
}
// 注册自定义元素
customElements.define('my-component', MyComponent);
上面代码定义了一个名为 my-component 的自定义元素，其内容被封装在 Shadow DOM 中，样式不会泄漏到外部，也不会被外部样式覆盖。
样式与作用域隔离
Shadow DOM 最大的优势之一是样式隔离。在 Shadow Root 内部定义的 CSS 只作用于该组件内部，即使选择器是全局的（如 body、div），也仅限于当前影子树。
校园订餐网2007版，其主要特点是功能简单实用。并且经过了一些大学的进行试点成功，已正式发布。整套程序由ASP+JAVASCRIPT完成的，没有DLL封装，源码完全开放便于用户做二次开发。主要针对客户群体是在校的大学生及在校傍边的餐饮店，因此功能针对性强，且价格低廉。初始管理员帐户为：admin密码：admin
例如，在 Shadow DOM 中写 p { color: red }，不会影响页面其他地方的 p 标签。
如果需要从外部影响 Shadow DOM 的样式，可以通过以下方式：
- 使用 CSS 自定义属性（CSS Variables）传递主题色等配置
- 在 Shadow Root 中预留插槽（slot）供外部传入内容
- 通过 :host、:host-context 等伪类控制宿主元素样式
this.shadow.innerHTML = ``;
上面示例中，: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 的使用，掌握好这些细节才能写出真正独立的组件。
