js操作shadow-root内的DOM元素

最新推荐文章于 2025-02-26 16:41:31 发布

smiley121

最新推荐文章于 2025-02-26 16:41:31 发布

阅读量6.1k

点赞数 2

文章标签： css html5 前端

本文链接：https://blog.csdn.net/qq_44376306/article/details/128552574

版权

一、背景

项目中在DOM结构里遇到了shadow-root(open)，用JS方法无法直接获取其内的DOM元素

二、shadow DOM

Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。shadow-root包裹下的对象，不在全局的DOM树中，因此getElementById 等方法，获取不到包裹中的对象。

Shadow DOM 这款工具旨在构建基于组件的应用。因此，可为网络开发中的常见问题提供解决方案：
隔离 DOM：组件的 DOM 是独立的（例如，document.querySelector() 不会返回组件 shadow DOM 中的节点）。
作用域 CSS：shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏，页面样式也不会渗入。
组合：为组件设计一个声明性、基于标记的 API。
简化 CSS - 作用域 DOM 意味着您可以使用简单的 CSS 选择器，更通用的 id/类名称，而无需担心命名冲突。
效率 - 将应用看成是多个 DOM 块，而不是一个大的（全局性）页面。

Shadow DOM 与普通 DOM 相同，但有两点区别：

创建/使用的方式；
与页面其他部分有关的行为方式。

通常，您创建 DOM 节点并将其附加至其他元素作为子项。借助于 shadow DOM，您可以创建作用域 DOM 树，该 DOM 树附加至该元素上，但与其自身真正的子项分离开来。这一作用域子树称为影子树。被附着的元素称为影子宿主。

简单的意思就是可以用来独立建立一块渲染块，不受外层样式的影响，内层的样式也不影响外层的显示。

三、操作shadow-root内的元素

1.先获取shadow-root的父级节点，然后用shadowRoot取得这个父级节点的shadow块，然后就可以进行操作了

document.querySelector('#root').shadowRoot.querySelector('.chakra-portal')

2.在shadow块下面创建style标签，在里面添加样式

    let gtx = document.querySelector("#root");
    let style = document.createElement("style");
    style.innerHTML =
      ".grid_wrap { display: flex;justify-content: center;align-items: center;}";
    gtx.shadowRoot.appendChild(style);

深入理解Shadow DOM v1 - 掘金