将 CSS 添加到第三方模块创建的 Shadow-root

Question

我正在开发一个 Magento2 网站，并且安装了一个 Amazon 支付模块，该模块在结帐页面上创建了一些额外的按钮（默认 Luma 主题）。大多数这些新元素在覆盖它们的 CSS 时都很好。然而，该插件还创建了一个 Shadow Root，其中封装了自己的样式标签和 div 元素。我需要重写 1 个样式规则以满足我的需求。

虽然我找到了很多关于什么是 Shadow-Root、如何创建 Shadow-Root 以及如何随后将 CSS 注入其中的文档，但我很困惑如何更改第三方插件生成的 Shadow-Root 的 CSS。

下面是代码：我认为 id="ui-id-1" 的 div 是根的主机，因为 #shadow-root (open) 直接放置在其中（它的子级）。我只是想更改现有影子根中样式标签中已存在的规则之一。

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

有人可以帮我想出一个解决方案吗？也许我可以添加到结账页面的一些脚本标签将覆盖或添加我自己的规则到现有的 Shadow-root 样式标签？

谢谢你

Answer 1

你可以试试这个代码：

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