Select Element Within Shadow Root

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'

Solution 1:

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

Solution 2:

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');