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

Question

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

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

我尝试了以下方法，这些方法不起作用：

（1）使用.SummaryCard-image{display:none !important;}

注入CSS

（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";

用于多个Twitter小部件

    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