Uncaught TypeError: Cannot read property 'appendChild' of null (anonymous) How to change CSS property of ShadowRoot (open)?

Question

ShadowRoot(open)

I want to change the z-index value of this ShadowRoot.

host = document.getElementById("shadow-root");
var style = document.createElement( 'style' )
 style.innerHTML = '.rssapp { z-index: -1; }'
 host.shadowRoot.appendChild( style )
// var sheet = new CSSStyleSheet
// sheet.replaceSync( `.rssapp { z-index: -1 }`)
// host.shadowRoot.adoptedStyleSheets = [ sheet ] 

I tried the above piece of code, both the commented and the un-commented one but both times it is showing Uncaught TypeError: Cannot read property 'shadowRoot' of null at script.js:35 (anonymous) or Uncaught TypeError: Cannot read property 'shadowRoot' of null at script.js:38 (anonymous) respectively

Edit: I tried with the id XQqyAJD0d17SWeNW as well.

Answer 1

Can you just add a style to the selected element? using Jquery maybe:

$('#shadow-root .rssapp').attr('style', 'z-index:-1');

or maybe something like this:

$('.rssapp').attr('style', 'z-index:-1');

Please tell me if this works.