如何给shadow DOM下的元素添加样式
一、问题描述
项目中在dom结构里遇到了shadow-DOM(open),如下
是一个表格组件,主要感觉滚动条有点low,需要自定义
但发现自己写的样式渗透不进去╮(╯▽╰)╭
Shadow DOM
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的父级节点
,然后用shadowRoot取得这个父级节点
的shadow块,然后就可以进行操作了
let gtx = document.querySelector('.esri-grid__grid');
let style = document.createElement("style");
style.innerHTML =
"#table::-webkit-scrollbar-track {background-color: #fff;}#table::-webkit-scrollbar {width: 8px;height:8px;opacity: 0.9;}#table::-webkit-scrollbar-thumb {border-radius: 8px;background-color: #dddee0;}";
gtx.shadowRoot.appendChild(style);
有时候可能由于页面还未渲染,获取的节点为空,我们可以在外出套个setTimeout(()=>{...},200)
是不是好看多了O(∩_∩)O哈哈~