Adding CSS to Shadow-root created by a third party module

Question

I'm working on a Magento2 website and I've installed an Amazon pay module that has created a few extra buttons on the checkout page (default Luma theme). Most of these new elements are fine when it comes to overriding their CSS. However the plugin has also created a Shadow Root with it's own style tags and div elements encapsulated within it. I need to override 1 of the style rules to fit my needs.

While I found a lot of documentation regarding what is Shadow-Root, how to create one and how to subsequently inject CSS into it, I'm confused how to change the CSS of Shadow-Root generated by a third party plugin.

Below is the code: the div with id="ui-id-1" is what I pressume to be the host of the root since the #shadow-root (open) is placed directly within it (it's child). I simply want to change one of the rules that is already present in the style tags within the existing shadow-root.

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

Can somebody help me come up with a solution? Perhaps some script tags that I can add to the checkout page that will override or add my own rule to the exisitng Shadow-root style tags?

Thank you

Answer 1

You can try this code:

<script>
    require([
        'jquery'], function ($, url) {
            var style = document.createElement( 'style' )
            style.innerHTML =
            //add your style code here
            setTimeout(function(){
              document.getElementsByClassName('yourClassName').shadowRoot.appendChild( style );
            }, 1000);
    });
</script>