本人github
Shadow DOM
是 Web 组件技术的一部分,它允许开发者创建组件时将其内部的 DOM 结构封装起来,避免与页面其他部分的样式和脚本发生冲突。Shadow Root
是 Shadow DOM 的起始节点。
什么是 Shadow DOM 和 Shadow Root
Shadow DOM
Shadow DOM 是一种允许将组件内部的 DOM 树与主文档的 DOM 树隔离的技术。它可以用于创建封装良好的组件,使得组件内部的样式和脚本不影响主文档,反之亦然。
Shadow Root
Shadow Root 是 Shadow DOM 的根节点,是附加到常规 DOM 元素上的一个私有 DOM 树。通过这种方式,可以实现样式和行为的封装。
使用 Shadow DOM 和 Shadow Root
创建 Shadow Root
你可以使用 JavaScript 在一个 DOM 元素上创建一个 Shadow Root:
// 获取宿主元素
const hostElement = document.querySelector('#host-element');
// 创建一个 Shadow Root
const shadowRoot = hostElement.attachShadow({ mode: