css 选择阴影根内的元素

xn1cxnb4 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(153)

我想修改隐藏在shadow root中的元素的属性。由于项目的性质，我不能直接引用JS中的文档，我只能使用自定义类（不适用于shadow root）或jQuery，但我不知道如何编写元素的路径。
元素没有“part”，所以我不能在选择器中使用它。
我已经尝试过的-我选择了shadow上面的最后一个元素并引用了它的shadowRoot，然后我尝试通过它的id找到封装的元素。我在devtool中测试了它，到目前为止还没有成功。

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

html代码片段：

css

来源：https://stackoverflow.com/questions/66384836/select-element-within-shadow-root

2条答案

按热度按时间

enxuqcxy1#

自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";

MDN上的Document.querySelector()文件。

赞(0）回复(0）举报 2022-12-24

s4n0splo2#

正如我提到过，我不能使用“document”。
error message
虽然这看起来很有效：

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

赞(0）回复(0）举报 2022-12-24

我来回答

css 选择阴影根内的元素

2条答案

相关问题

热门标签

最新问答