使用Twitter Widget样式化推文遇阻：无法获取Shadow Root仅得iframe

我之前也碰到过类似的情况，结合你的描述和代码来看，这个问题大概率是Twitter Widget组件的更新导致的，Chrome版本更新可能只是间接因素，下面具体说下原因和可行的解决办法：

可能的原因 #

• Twitter Widget的实现变更：之前它用Shadow DOM来隔离组件样式，但最近可能把渲染方式改成了跨域iframe。这种情况下，你拿到的el其实是一个iframe元素，而不是带有shadowRoot的自定义元素，自然无法通过el.shadowRoot访问内部DOM——浏览器的同源策略会阻止你访问跨域iframe的内容。
• Chrome安全策略强化：虽然可能性更低，但Chrome近期的版本确实加强了对跨域内容和Shadow DOM的权限控制，如果Twitter Widget没有适配新的策略，也可能导致shadowRoot无法被外部脚本访问。

可行的解决方案 #

1. 优先使用官方配置参数 #

先去查Twitter Widget的官方文档，看看有没有支持隐藏footer的原生配置项。比如你已经用到了conversation: 'none'，说不定有类似hideFooter: true这类参数，用官方支持的方式修改样式是最稳妥的，不会因为组件更新失效。

2. 自行渲染推文（推荐） #

如果官方没有提供需要的配置，建议直接调用Twitter API获取推文数据，自己用HTML/CSS渲染。这样完全可控，不会依赖第三方组件的DOM结构：

• 调用Twitter的GET /2/tweets/:id接口，获取推文的文本、作者信息、发布时间等数据；
• 按照你想要的样式编写HTML结构，比如隐藏footer、自定义主题等；
• 最后用html2canvas生成截图，整个流程都在你的控制范围内，不会受第三方组件更新影响。

3. 尝试iframe通信（不推荐） #

如果必须用Twitter Widget的iframe渲染，可以试试用postMessage和iframe通信，但前提是Twitter的iframe页面允许接收并处理你的消息——这几乎不可能，因为跨域安全限制，Twitter不会开放这样的权限，所以这个方案可行性极低。

附上你的原始代码 #

<div id="tweet" tweetID="1276058326954938368"></div>
<script sync src="https://platform.twitter.com/widgets.js"></script>
<script>
window.onload = (function(){
    var tweet = document.getElementById("tweet");
    var id = tweet.getAttribute("tweetID");
    twttr.widgets.createTweet(
        id, tweet,
        { conversation : 'none', theme : 'light' })
    .then (function (el) {
        el.shadowRoot.querySelector(".footer").style.display = "none";
    });
});
</script>

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