Estoy trabajando en un sitio web de Magento2 e instalé un módulo de pago de Amazon que creó algunos botones adicionales en la página de pago (tema predeterminado de Luma). La mayoría de estos nuevos elementos están bien cuando se trata de anular su CSS. Sin embargo, el complemento también ha creado un Shadow Root con sus propias etiquetas de estilo y elementos div encapsulados dentro de él. Necesito anular 1 de las reglas de estilo para que se ajuste a mis necesidades.

Si bien encontré mucha documentación sobre qué es Shadow-Root, cómo crear uno y cómo inyectarle CSS posteriormente, estoy confundido sobre cómo cambiar el CSS de Shadow-Root generado por un complemento de terceros.

A continuación se muestra el código: el div con id="ui-id-1" es lo que presumo que es el anfitrión de la raíz ya que #shadow-root (abierto) se coloca directamente dentro de él (es hijo). Simplemente quiero cambiar una de las reglas que ya está presente en las etiquetas de estilo dentro de la raíz oculta existente.

 <div id="ui-id-1" class="amazonpay-button-parent-container-checkout-A30W0859IUOOZ7" role="button" aria-label="Amazon Pay - Use your Amazon Pay Sandbox test account" title="Pay using the information already stored in your Amazon account" style="width: 300px; height: 45px; position: relative;"> #shadow-root (open) </style> <--THERE'S ONE RULE IN HERE I NEED TO OVERRIDE--> </style> <div> <--SHADOW ROOT'S HTML ELEMENTS ARE PLACED HERE - I DO NOT WANT TO TOUCH THIS--> </div> </div>

¿Alguien puede ayudarme a encontrar una solución? ¿Quizás algunas etiquetas de script que puedo agregar a la página de pago que anularán o agregarán mi propia regla a las etiquetas de estilo Shadow-root existentes?

Gracias