如何给shadow DOM下的元素添加样式

本文主要是介绍如何给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哈哈~

这篇关于如何给shadow DOM下的元素添加样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！