影子DOM是Web Components标准的一部分，通过attachShadow方法为元素挂载独立DOM树，实现样式与结构的隔离；其内部CSS仅作用于影子根内，支持slot内容分发和::part()样式定制；常与自定义元素结合，用于构建高封装性的可复用组件，适用于设计系统、微前端等需避免样式冲突的场景。
影子DOM（Shadow DOM）是JavaScript中用于构建封装组件的核心技术之一。它允许开发者将一个独立的DOM树附加到某个元素上，并与主文档的DOM隔离，从而实现样式和结构的封装。这种隔离特性让组件内部的HTML、CSS不会受到外部影响，也避免了全局污染，特别适合开发可复用的UI组件。
什么是影子DOM
影子DOM是一种浏览器原生支持的技术，属于Web Components标准的一部分。它可以在普通DOM元素内部创建一个“影子根”，这个根节点下可以包含独立的DOM结构和样式。
通过Element.attachShadow()方法，你可以为任意元素挂载一个影子根：
- 使用
{ mode: 'open' }时，可以通过JavaScript在外部访问影子根 - 使用
{ mode: 'closed' }时，影子根无法被外部脚本访问，增强封装性
const div = document.createElement('div');
const shadowRoot = div.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = '<style>p { color: red; }</style><p>这是影子DOM内容</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>';
document.body.appendChild(div);
样式与结构的隔离
影子DOM最大的优势在于其封装能力。内部样式默认不会泄露出去，外部样式也不会轻易影响内部元素。
- 在影子根中定义的CSS只作用于内部元素，即使选择器为
p也不会影响页面其他<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a> <p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - 可通过
::part()和::slotted()机制暴露部分样式接口，供外部定制 - slot元素可用于插入外部内容，实现内容分发，提升组件灵活性
shadowRoot.innerHTML = ` <slot name="title"></slot> <slot>默认内容</slot> `;然后在外部使用：
<my-component> <span slot="title">标题</span> <p>填充默认插槽</p> </my-component>
结合自定义元素使用
影子DOM常与Custom Elements搭配使用，构建完整的自定义组件。
通过继承HTMLElement并在构造函数中挂载影子根，可以创建高度封装的HTML标签。
- 定义类并调用
this.attachShadow({ mode: 'open' }) - 在类中添加事件监听、属性响应逻辑
- 使用
customElements.define()注册新标签名
class MyCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>.card { border: 1px solid #ccc; padding: 1em; }</style>
<div class="card">
<slot></slot>
</div>
`;
}
}
customElements.define('my-card', MyCard);
之后即可使用：<my-card>我是卡片内容</my-card>
实际应用场景
影子DOM适用于需要高内聚、低耦合的组件开发场景。
- 构建设计系统中的按钮、输入框、弹窗等基础组件
- 避免第三方库样式冲突，特别是在嵌入式小工具或微前端中
- 开发浏览器扩展或Widget类功能模块
虽然现代框架如React主要依赖虚拟DOM和JSX，但在需要真正样式隔离时，影子DOM仍是不可替代的选择。
基本上就这些。掌握影子DOM有助于深入理解组件化本质，也能在特定项目中发挥独特优势。
