如何自定义#shadow-root (open)内元素？修改第三方页脚背景色遇阻

架构老林

2026-6-19

自定义Shadow DOM内的.formFooter样式（Squarespace场景）

问题背景

我正在调整第三方代码的样式，使其匹配Squarespace网站的配色。目标是把第三方页脚里.formFooter的background-color改成#ff0000，但这个元素处于open状态的#shadow-root内，直接在CSS里定位.formFooter完全没效果。

检查器获取的HTML结构：

<div>
 #shadow-root (open)
 <style></style>
<div class="formFooter-heightMa sk"></div>
<div class="formFooter f6 branding21 ">∞</div>flex)
== $0
<style id="action-styles">
</style>
</div>
</form>

对应的原有样式：

.formFooter {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #0A1551;
}