项目中在dom结构里遇到了shadow-DOM(open),如下
但是直接添加样式无法生效,用JS方法直接获取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里的元素添加样式
- 先获取shadow-root的父级节点,然后用shadowRoot取得这个父级节点的shadow块,然后就可以进行操作了
document.querySelector('.contant').shadowRoot.querySelector('.vscroll-nav').innerHTML
这个方法在我项目中好像不太行,能获取到shadow块,但是获取不到shadow块下面的子元素
console.log(document.querySelector('.contant').shadowRoot)
console.log(document.querySelector('.contant').shadowRoot.querySelector('.vscroll-nav'));
- 在shadow块下面创建style标签,在里面添加样式(这个可以)
let gtx = document.querySelector(".contant");
let style = document.createElement("style");
style.innerHTML =
".li-frame { display: flex;justify-content: center;align-items: center;}";
gtx.shadowRoot.appendChild(style);
相关资料: Shadow DOM v1:独立的网络组件