标签：style DOM 样式 作用域 组件 shadow CSS
一、问题描述
项目中在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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。