如何修改Shadow Dom内HTML文档的CSS？（Tableau嵌入Wix场景）

核心问题说明 #

你遇到的关键障碍是浏览器同源策略限制：Wix网站与Tableau iframe分属不同域名，浏览器会阻止页面脚本直接访问跨域iframe内部的DOM结构（包括#shadow-root下的元素），所以你之前的JS代码无法生效是浏览器安全机制导致的正常现象。

可行解决方案 #

方案1：通过Tableau原生配置修改（推荐）

这是最简单且无跨域风险的方法，直接在Tableau端设置透明背景：

• 打开你的Tableau仪表板，点击顶部菜单「仪表板」→「格式」→「背景」
• 将背景设置为透明，重新发布仪表板
• 确保嵌入的iframe已添加allowtransparency="true"（你已完成这一步），重新嵌入后背景会自动变为透明

方案2：使用Tableau JavaScript API（需权限支持）

如果需要更灵活的控制，可借助Tableau官方JS API：

• 初始化可视化时，通过配置参数（如hideTabs: true）或在加载完成后调用API方法调整样式
• 注意：需在Tableau后台将Wix域名添加到允许嵌入的域名列表，否则仍会触发跨域限制

对你现有JS代码的问题解析 #

你之前的代码存在两处关键问题：

1. 访问iframe内部DOM的方式错误：需先获取iframe的contentDocument/contentWindow，但跨域下浏览器会直接阻止该操作
2. 语法错误：document.querySelector获取的是原生DOM元素，不能使用jQuery的attr()方法，正确的原生写法应为spacer.style.backgroundColor = 'transparent'——但跨域限制下这行代码根本无法执行

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