Tengo un componente en el que necesito cambiar los estilos, pero en el dom real no puedo hacerlo, pero en el shadow-dom, puedo lograr esto en la consola. Cada vez que intento acceder al componente shadow-dom, arroja un error nulo.

 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 ]

Muestra un error en la propiedad frame.shadowRoot, que no hay shadowRoot definido, ya que estoy accediendo a la biblioteca de terceros, por lo que shadow-dom está definido en la biblioteca de terceros.

Estructura para shadow-dom:

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