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

项目中在dom结构里遇到了-DOM(open) ，如下
【如何给shadow DOM下的元素添加样式】但是直接添加样式无法生效，用JS方法直接获取DOM也获取不到。
网上查了一下， -root包裹下的对象，不在全局的DOM树中，因此等方法，获取不到包裹中的对象。
比较官方的解释是：
DOM 这款工具旨在构建基于组件的应用。因此，可为网络开发中的常见问题提供解决方案：
DOM 与普通 DOM 相同，但有两点区别：
创建/使用的方式；与页面其他部分有关的行为方式。
通常，您创建 DOM 节点并将其附加至其他元素作为子项。借助于DOM ，您可以创建作用域 DOM 树，该 DOM 树附加至该元素上，但与其自身真正的子项分离开来。这一作用域子树称为影子树。被附着的元素称为影子宿主。
反正简单的意思就是可以用来独立建立一块渲染块，不受外层样式的影响，内层的样式也不影响外层的显示。
总结一下，可以用以下方法给-root里的元素添加样式
先获取-root的父级节点，然后用取得这个父级节点的块，然后就可以进行操作了
document.querySelector('.contant').shadowRoot.querySelector('.vscroll-nav').innerHTML

文章插图
这个方法在我项目中好像不太行，能获取到块，但是获取不到块下面的子元素

 console.log(document.querySelector('.contant').shadowRoot)console.log(document.querySelector('.contant').shadowRoot.querySelector('.vscroll-nav'));

在块下面创建style标签，在里面添加样式（这个可以）

let gtx = document.querySelector(".contant");let style = document.createElement("style");style.innerHTML =".li-frame { display: flex;justify-content: center;align-items: center;}";gtx.shadowRoot.appendChild(style);

相关资料:DOM v1：独立的网络组件