Shadow DOM是HTML5推出的一项Web标准特性，属于Web Components规范的核心组成部分，它允许开发者将隐藏的DOM树附加到常规的DOM树中，并且这棵隐藏的DOM树和外部DOM树相互隔离，拥有独立的样式和作用域，不会受到外部样式的影响，也不会干扰外部DOM的结构和样式。
Shadow DOM的核心特性
作用域隔离
Shadow DOM最显著的特性就是作用域隔离，其内部定义的CSS样式只会作用于Shadow DOM内部的元素，不会渗透到外部DOM中，外部DOM的样式也不会影响到Shadow DOM内部的内容。这种特性非常适合开发可复用的组件，避免组件样式和页面全局样式产生冲突。
DOM结构封装
附加了Shadow DOM的元素，其内部的Shadow DOM结构在常规的DOM查询中默认是不可见的，比如使用document.querySelector无法直接选中Shadow DOM内部的元素，这实现了组件内部实现细节的隐藏，外部只需要关注组件暴露的属性和方法即可。
Shadow DOM的基本使用示例
我们可以通过Element.attachShadow()方法为元素添加Shadow DOM，该方法接收一个配置对象，其中mode属性用来设置Shadow DOM的封装模式，open表示可以通过JavaScript访问Shadow DOM内部，closed则表示外部无法直接访问。
// 获取宿主元素
const hostElement = document.querySelector('#custom-component');
// 为宿主元素附加Shadow DOM，设置模式为open
const shadowRoot = hostElement.attachShadow({ mode: 'open' });
// 向Shadow DOM中添加内容
shadowRoot.innerHTML = `
<style>
/* 这里的样式只作用于Shadow DOM内部 */
.inner-text {
color: #ff0000;
font-size: 16px;
}
</style>
<div class="inner-text">这是Shadow DOM内部的内容</div>
`;
HTML4的组件封装方法
HTML4本身并没有提供像Shadow DOM这样原生的组件封装能力，当时开发者如果需要实现类似的组件化效果，通常会采用以下几种模拟方案：
iframe嵌入方案
iframe可以创建一个完全独立的文档环境，内部的HTML、CSS、JavaScript都和外部页面隔离，这在一定程度上实现了组件的封装效果。开发者可以将组件的代码放在独立的HTML文件中，通过iframe嵌入到页面中。
<!-- 主页面中嵌入iframe作为组件 --> <iframe src="custom-component.html" width="300" height="200" frameborder="0"></iframe>
这种方案的优点是隔离性非常好，缺点也很明显：iframe会创建独立的文档环境，资源加载开销大，和主页面的通信需要通过postMessage等方式实现，交互不够灵活，而且样式难以和主页面统一。
命名空间+约定式隔离
开发者可以通过给组件的CSS类名和DOM元素添加特定的前缀命名空间，同时约定组件内部的DOM操作只针对带有该命名空间的元素，来模拟作用域隔离的效果。比如所有组件内部的类名都加上com-prefix-前缀。
/* 组件样式，通过前缀避免冲突 */
.com-prefix-header {
background-color: #f0f0f0;
padding: 10px;
}
.com-prefix-content {
font-size: 14px;
color: #333;
}
<!-- 组件HTML结构 --> <div class="com-prefix-wrapper"> <div class="com-prefix-header">组件头部</div> <div class="com-prefix-content">组件内容</div> </div>
这种方案的实现成本较低，但是没有强制的隔离机制，如果其他开发者不小心使用了相同的类名前缀，还是会产生样式冲突，而且无法隐藏组件的内部DOM结构，安全性不足。
JavaScript动态生成DOM+闭包封装
开发者可以通过JavaScript闭包的特性，将组件的DOM生成逻辑和内部状态封装在闭包内部，只对外暴露必要的操作接口，避免外部直接修改组件内部的状态和结构。
// 定义一个组件构造函数
function CustomComponent(containerId) {
// 闭包内部变量，外部无法直接访问
const container = document.getElementById(containerId);
let innerText = '默认内容';
// 初始化组件DOM
function init() {
const wrapper = document.createElement('div');
wrapper.className = 'custom-com';
const textEl = document.createElement('span');
textEl.innerText = innerText;
wrapper.appendChild(textEl);
container.appendChild(wrapper);
}
// 对外暴露修改内容的方法
this.setText = function(newText) {
innerText = newText;
container.querySelector('.custom-com span').innerText = newText;
};
init();
}
// 使用组件
const com = new CustomComponent('com-container');
com.setText('修改后的内容');
这种方案可以实现组件逻辑和状态的封装，但是样式隔离仍然需要依靠命名空间约定，而且组件的复用性较差，每个组件都需要单独编写封装逻辑。
两种规范下的组件封装对比
我们可以通过下表直观对比HTML5 Shadow DOM和HTML4常用封装方案的差异：
| 对比维度 | HTML5 Shadow DOM | HTML4常用封装方案 |
|---|---|---|
| 原生支持 | 是，浏览器原生提供API | 否，需要开发者自行实现模拟逻辑 |
| 样式隔离 | 原生完全隔离，无需额外处理 | 需要依靠命名空间约定，无强制隔离 |
| DOM隐藏 | 原生支持，外部默认无法访问 | 无原生支持，只能通过逻辑约定隐藏 |
| 复用成本 | 低，符合标准，通用性好 | 高，不同方案的通用性差 |
| 性能开销 | 低，属于浏览器原生实现 | iframe方案开销大，其他方案开销较小 |
总结
Shadow DOM是HTML5为原生组件化开发提供的重要能力，它从规范层面解决了组件样式隔离、DOM结构封装的问题，让前端开发者可以开发更独立、更易复用的原生组件。而HTML4由于规范本身的限制，没有原生的组件封装能力，当时的开发者只能通过iframe、命名空间约定、闭包封装等方案模拟组件化效果，这些方案都存在一定的局限性。现在前端开发中如果需要实现组件化，优先推荐使用HTML5的Shadow DOM结合Web Components规范，能够获得更好的性能和通用性。
Shadow_DOMHTML5HTML4组件封装修改时间：2026-06-27 00:21:33