如何给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);