如何给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哈哈~
标签：style,DOM,样式,作用域,组件,shadow,CSS 来源： https://www.cnblogs.com/echohye/p/16631876.html