9

I want to change a property in element hidden within shadow root. Due to the nature of a project I can't refer to document in JS directly, I can only use custom class (which doesn't work with shadow root) or jQuery, but I don't know how to write a path to the element.

The element does not have "part" so I can't use it in selector.

What I've already tried - I selected last element above shadow and referenced its shadowRoot, then I tried to find encapsulated element by its id. I was testing it in devtool, so far with no success.

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

html snippet:

Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
JakubJ
  • 101
  • 1
  • 1
  • 4

2 Answers2

14

No need for jQuery selectors since IE9 was released... in 2011

[element].querySelector( selector ) uses the same notation

  • let div = document.querySelector("#root_ptcschartline-7-bounding-box");
    gets you the <div>

  • let chartLine = div.querySelector("ptcs-chart-line");
    gets you the <ptcs-chart-line> element

  • let shadow = chartline.shadowRoot;
    gets you the shadowRoot reference

  • let layout = shadow.querySelector("#chart-layout")
    gets you the <ptcs-chart-layout> element

all combined

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

layout.style.padding = "100px";

Document.querySelector() docs on MDN.

Paolo
  • 20,112
  • 21
  • 72
  • 113
Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
1

As I've mention I cannot use "document".

error message

Although this seems to do the trick:

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