如何覆写第三方模块生成的Shadow Root内的CSS样式规则

问题场景 #

• Magento2站点安装Amazon Pay支付模块后，Luma主题结账页的普通支付按钮样式可直接覆写，但模块生成的支付按钮使用了open模式的Shadow Root做样式隔离，外部全局CSS无法穿透生效
• 需求为不改动Shadow Root内部的HTML元素结构，仅覆写其中1条已有样式规则适配站点设计
• 对应DOM结构如下，#ui-id-1为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>
    /* 内置1条需要覆写的样式规则 */
  </style>
  <div>
    <!-- Shadow Root内部业务元素，无需修改 -->
  </div>

</div>

可直接落地的脚本方案 #

open模式的Shadow Root可直接通过JS访问内部节点，不需要修改原有内置style标签，直接在Shadow Root内部追加自定义style标签，利用CSS优先级规则覆写目标样式即可，脚本可直接添加到Magento结账页的自定义JS块中：

const overrideAmazonPayShadowStyle = () => {
  const hostNode = document.getElementById('ui-id-1');
  // 节点未渲染时100ms后轮询重试
  if (!hostNode || !hostNode.shadowRoot) {
    setTimeout(overrideAmazonPayShadowStyle, 100);
    return;
  }
  const shadowRoot = hostNode.shadowRoot;
  // 避免重复注入样式
  if (shadowRoot.getElementById('magento-custom-amazonpay-style')) return;

  // 创建自定义样式节点
  const customStyle = document.createElement('style');
  customStyle.id = 'magento-custom-amazonpay-style';
  // 替换为你实际需要覆写的选择器和样式，加!important保证优先级
  customStyle.textContent = `
    .your-target-selector {
      /* 示例：修改按钮宽度 */
      width: 100% !important;
      /* 在这里写你要覆盖的样式属性 */
    }
  `;
  // 插入到Shadow Root末尾，保证样式优先级高于内置样式
  shadowRoot.appendChild(customStyle);
};

// 页面加载完成后初始化
if (document.readyState !== 'loading') {
  overrideAmazonPayShadowStyle();
} else {
  document.addEventListener('DOMContentLoaded', overrideAmazonPayShadowStyle);
}

// 适配Magento一步结账切换步骤时重渲染支付模块的场景
if (window.require) {
  require(['jquery'], $ => {
    $(document).on('click', '.opc-progress-bar-item, .action.primary', () => {
      setTimeout(overrideAmazonPayShadowStyle, 300);
    });
  });
}

说明 #

• 不需要修改Shadow Root内置的原有style标签内容，追加的自定义样式加载顺序更靠后，同权重下会自动覆盖原有规则，加!important可以完全避免优先级问题
• 脚本做了轮询检测和去重处理，适配Magento结账页动态渲染的特性，不会重复插入样式节点
• 全程不会改动Shadow Root内部的业务DOM结构，不会影响Amazon Pay支付模块的原有逻辑

内容的提问来源于stack exchange，提问作者user16561352