I have a component in which I need to change the styles, but in the real dom I am not able to do that, but in the shadow-dom, I can achieve this tried on the console. Whenever I try to access the shadow-dom component it is throwing null error.

let frame = document.getElementsByTagName("iframe")[0];

let sheet = new CSSStyleSheet;

sheet.replaceSync( `.component { position: absolute; top: 0; bottom: 0; left: 0; right: 0; 
height: 100%; width: 100%; }`);

const elemStyleSheets = frame.shadowRoot.adoptedStyleSheets;

frame.shadowRoot.adoptedStyleSheets = [sheet ]

It is showing error in frame.shadowRoot property, that there is no shadowRoot defined, as I am accessing the 3rd party library, so there shadow-dom is defined in the 3rd party library.

Structure for shadow-dom:

<iframe>
  #document >> separate html page
</iframe>