如何为Lemon Squeezy支付模态结账框添加自定义样式

方法1：使用官方事件钩子（最可靠） #

Lemon Squeezy提供了原生事件回调，能精准捕获结账框打开时机，避免监听DOM变化的不确定性：

// 监听结账框打开事件
document.addEventListener('ls.checkout.open', () => {
  // 延迟100ms确保元素完全渲染
  setTimeout(() => {
    const checkoutEl = document.querySelector('.ls-checkout');
    if (checkoutEl) {
      // 添加自定义类
      checkoutEl.classList.add('my-custom-checkout');
      // 或直接设置内联样式
      checkoutEl.style.maxWidth = '900px';
      checkoutEl.style.margin = '0 auto';
    }
  }, 100);
});

方法2：修正MutationObserver监听逻辑 #

如果官方事件无法使用，调整监听范围和节点检测逻辑，确保捕获动态插入的元素：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType !== 1) return;
      // 检查当前节点或子节点是否是目标元素
      const checkoutEl = node.classList.contains('ls-checkout') 
        ? node 
        : node.querySelector('.ls-checkout');
      if (checkoutEl) {
        checkoutEl.style.backgroundColor = '#f5f5f5';
        checkoutEl.style.borderRadius = '8px';
        // 强制覆盖第三方样式
        checkoutEl.style.setProperty('border', '1px solid #ddd', 'important');
      }
    });
  });
});

// 监听body下所有子节点变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

方法3：提升自定义CSS优先级 #

如果样式被第三方脚本覆盖，用高优先级选择器+!important强制生效：

/* 用body前缀提升优先级 */
body .ls-checkout.my-custom-checkout {
  background-color: #f5f5f5 !important;
  border-radius: 8px !important;
}

/* 直接针对目标元素 */
.ls-checkout {
  max-width: 900px !important;
  margin: 0 auto !important;
}

排查要点 #

• 检查元素是否在Shadow DOM：右键检查结账框，若存在#shadow-root，需通过宿主元素访问Shadow DOM内部：

  const shadowHost = document.querySelector('.ls-checkout-container');
  if (shadowHost?.shadowRoot) {
    const checkoutEl = shadowHost.shadowRoot.querySelector('.ls-checkout');
    checkoutEl?.classList.add('my-custom-checkout');
  }
  

• 确保脚本执行时机：将代码放在DOMContentLoaded事件中，避免提前执行：

  document.addEventListener('DOMContentLoaded', () => {
    // 监听代码放在这里
  });
  

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