选择影子根中的元素

Question

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

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

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

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

html 片段：

Answer 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>

  元素

全部合并

注意！这仅适用于

#shadow-root (open)

不适用于

#shadow-root (closed)

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

layout.style.padding = "100px";  

Document.querySelector() MDN 上的文档。

Answer 2

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

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

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