JavaScript操作Shadow DOM需先用attachShadow()创建影子根并指定open/closed模式，再通过shadowRoot使用标准DOM方法操作；两者与主DOM隔离，可通过自定义事件、slot和:host等机制通信与样式穿透。
JavaScript操作Shadow DOM主要靠
attachShadow()
创建影子根，再用标准DOM方法往里面添加和查询元素。
创建Shadow DOM
调用
element.attachShadow()
方法为元素挂载影子根。必须传入
{mode: 'open'}
或
{mode: 'closed'}
：
open
模式下，可通过
直接访问影子根，支持常规DOM操作
closed
模式下，
返回
，外部JS无法访问内部结构（仅组件内部能操作）
示例：
在Shadow DOM中操作节点
一旦拿到
shadowRoot
，就能像操作普通DOM一样使用
、
、
等方法：
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
添加内容：
查找元素：
（只在影子树内查找）
监听事件：
，或绑定到内部按钮上
注意：
查不到影子树里的节点，反之亦然——两者是隔离的。
跨边界通信与样式穿透
Shadow DOM默认有样式和脚本
作用域
隔离，但仍有可控方式交互：
通过
自定义事件
向外派发：
用
slot
让外部HTML“透传”进Shadow DOM：
占位，外部内容自动渲染其中
样式方面，
选中宿主元素，
可样式化插槽中的p标签，但无法用外部CSS直接选中内部元素
检查与调试技巧
Chrome/Firefox开发者工具默认会显示Shadow DOM（需开启“Show user agent shadow DOM”设置）：
在Elements面板中，带“#shadow-root”标记的节点就是影子根
右键影子根 → “Break on” → “subtree modifications”，可监听内部变动
控制台中输入
（选中宿主元素后），快速访问当前影子根
基本上就这些。不复杂但容易忽略mode选项和作用域边界。
element.shadowRootshadowRootnullconst host = document.getElementById('my-host');
const shadow = host.attachShadow({ mode: 'open' }); // 创建open模式Shadow DOM
shadow.innerHTML = `Hello from Shadow DOM!
立即学习“Java免费学习笔记（深入）”；
`;querySelectorappendChildaddEventListenershadow.appendChild(document.createElement('div'))shadow.querySelector('button')shadow.addEventListener('click', handler)document.querySelector()host.dispatchEvent(new CustomEvent('data-ready', { detail: data })):host::slotted(p)$0.shadowRoot