ShadowRoot

Shadow DOM API 的 ShadowRoot 接口是一个 DOM 子树的根节点, 它与文档的主 DOM 树分开渲染。

可以通过使用一个元素的 Element.shadowRoot 属性来检索它的参考,假设它是由 [Element.attachShadow] 创建的并使 mode 设置为 open。

const s = document.querySelector('section')
const shadow = s.attachShadow({mode: 'closed'})
const text = document.createElement('span')
text.textContent = '你好'
shadow.appendChild(text)

属性

ShadowRoot.host 只读ShadowRoot 附加的宿主 DOM 元素。

ShadowRoot.innerHTML ShadowRoot 内部的 DOM 树。

ShadowRoot.mode 只读ShadowRoot 的模式——可以是 open 或者 closed。