选择阴影根内的元素答案

【问题标题】：Select element within shadow root选择阴影根内的元素
【发布时间】：2021-05-28 18:37:51
【问题描述】：

我想更改隐藏在阴影根中的元素中的属性。由于项目的性质，我不能直接在 JS 中引用文档，我只能使用自定义类（不适用于 shadow root）或 jQuery，但我不知道如何编写路径元素。

该元素没有“部分”，所以我不能在选择器中使用它。

我已经尝试过 - 我选择了阴影上方的最后一个元素并引用了它的 shadowRoot，然后我尝试通过它的 id 找到封装的元素。我在 devtool 中测试它，到目前为止没有成功。

$("#root_ptcschartline-7-bounding-box".shadowRoot).find("#chart-line")
  .css('padding','100px');

html sn-p:

【问题讨论】：

标签： html jquery css shadow-dom

【解决方案1】：

自 2011 年 IE9 发布以来，不再需要 jQuery 选择器......

[element].querySelector( selector ) 使用相同的符号

let div = document.querySelector("#root_ptcschartline-7-bounding-box");
给你<div>
let chartLine = div.querySelector("ptcs-chart-line");
获取<ptcs-chart-line> 元素
let shadow = chartline.shadowRoot;
为您提供 shadowRoot 参考
let layout = shadow.querySelector("#chart-layout")
获取<ptcs-chart-layout> 元素

全部组合

let layout = document
               .querySelector("#root_ptcschartline-7-bounding-box ptcs-chart-line")
               .shadowRoot
                   .querySelector("#chart-layout");

layout.style.padding = "100px";

【讨论】：

【解决方案2】：

正如我所提到的，我不能使用“文档”。

error message

虽然这似乎可以解决问题：

$('#chart-layout', $('#root_ptcschartline-7-bounding-box ptcs-chart-line')[0].shadowRoot).css('padding');

【讨论】：