JavaScript如何操作Shadow DOM？-js教程-PHP中文网

JavaScript如何操作Shadow DOM？

php中文网

发布： 2025-12-14 09:45:22

原创

523人浏览过

JavaScript操作Shadow DOM需先用attachShadow()创建影子根并指定open/closed模式，再通过shadowRoot使用标准DOM方法操作；两者与主DOM隔离，可通过自定义事件、slot和:host等机制通信与样式穿透。

javascript如何操作shadow dom？

JavaScript操作Shadow DOM主要靠 attachShadow() 创建影子根，再用标准DOM方法往里面添加和查询元素。

创建Shadow DOM

调用 element.attachShadow() 方法为元素挂载影子根。必须传入 {mode: 'open'} 或 {mode: 'closed'}：

open 模式下，可通过 element.shadowRoot 直接访问影子根，支持常规DOM操作
closed 模式下，shadowRoot 返回 null，外部JS无法访问内部结构（仅组件内部能操作）

示例：

const host = document.getElementById('my-host');
const shadow = host.attachShadow({ mode: 'open' }); // 创建open模式Shadow DOM
shadow.innerHTML = `<p>Hello from Shadow 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>`;

登录后复制

在Shadow DOM中操作节点

一旦拿到 shadowRoot，就能像操作普通DOM一样使用 querySelector、appendChild、addEventListener 等方法：

情感家园企业站5.0 多语言多风格版

一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！

查看详情

添加内容：shadow.appendChild(document.createElement('div'))
查找元素：shadow.querySelector('button')（只在影子树内查找）
监听事件：shadow.addEventListener('click', handler)，或绑定到内部按钮上

注意：document.querySelector() 查不到影子树里的节点，反之亦然——两者是隔离的。

跨边界通信与样式穿透

Shadow DOM默认有样式和脚本作用域隔离，但仍有可控方式交互：

通过 自定义事件 向外派发：host.dispatchEvent(new CustomEvent('data-ready', { detail: data }))
用 slot 让外部HTML“透传”进Shadow DOM：<slot></slot> 占位，外部内容自动渲染其中
样式方面，:host 选中宿主元素，::slotted(p) 可样式化插槽中的p标签，但无法用外部CSS直接选中内部元素