使用 JavaScript 将 div 隐藏在（例如 Twitter）shadow-dom 中

Question

使用 TamperMonkey 简化我这边的页面视图，并希望隐藏部分外部来源的 Twitter 卡片以防止打印。EmbeddedTweet 中的图像无论如何都不会打印，并留下一个大的空白矩形，浪费了宝贵的空间。

DOM 如下图所示 - 我将如何使用类SummaryCard-image（绿色箭头）定位 DIV ？对我来说，DIV 是从 DOM 中删除还是用 CSS 隐藏都无关紧要。

我尝试了以下方法，但都不起作用：

(1) 注入 CSS .SummaryCard-image{display:none !important;}

(2) jQuery： $('.SummaryCard-image').remove();

$('.SummaryCard-image').length 返回 0

（注意#shadow-root (open)从顶部开始的第二个元素）

Answer 1

您需要先选择阴影根以遍历该元素。你需要这样的东西

var twitterWidget= document.querySelector('twitterwidget').shadowRoot;
twitterWidget.querySelector('.SummaryCard-image').style.display = "none";

对于多个推特小部件

    var twitterWidgets = document.querySelectorAll('twitterwidget'); 

    twitterWidgets.forEach(function(item){
      var root = item.shadowRoot; root.querySelector('.SummaryCard-image').style.display = 'none';
    })

示例 https://rawgit.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/raw/fancy-tabs-demo.html

var tabs= document.querySelector('fancy-tabs').shadowRoot
tabs.querySelector('#tabs').style.display = none