javascript - 如何遍历影子 DOM 中的元素
问题描述
我有
div id=outer
#shadowRoot
div id=inner
button
在按钮的单击处理程序中,我想引用 div“内部”。在非 shadowDom 世界中,这将是document.getElementById('inner')
,但在 shadow DOM 世界中等价物是什么?
注意。这是从自定义元素中访问的。我不想从外部刺穿影子 DOM。
解决方案
您可以使用绝对路径:用于shadowRoot
获取 Shadow DOM 内容。
document.querySelector( 'div#outer' ).shadowRoot.querySelector( 'div#inner' )
或相对路径:用于getRootNode()
获取 Shadow DOM 根
event.target.getRootNode().querySelector( 'div#inner' )
例子:
outer.attachShadow( { mode: 'open' } )
.innerHTML = `
<div id=inner></div>
<button>clicked</button>
`
outer.shadowRoot.querySelector( 'button' ).onclick = ev =>
ev.target.getRootNode().querySelector( 'div#inner' ).innerHTML = 'clicked'
<div id=outer></div>
推荐阅读
- django - 我的 main.css 没有渲染,我正在使用多个入口点 webpack.config
- django - 在Django中使用下拉框显示对应的值
- powershell - 将新用户添加到 Active Directory 并允许拆分具有多个值的单元格以将单个组添加到用户
- c# - 提高 LINQ 查询性能。带有“连接”的查询或小查询?
- python - 更新了 Windows,现在我无法导入 ssh2.session?
- sql-server - 当我使用 TSQL 插入时,为什么我的约束中有冲突
- python - 教程中编写的 Pytorch model.train() 和一个单独的 train() 函数
- azure - 在脚本中调用连接 cmdlet
- flutter - 任何人都可以解释这部分吗?
- javascript - 为什么我的 v-select 的标题(字符串)在空格处被分成换行符?