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

【问题标题】：Hide div inside (e.g. Twitter) shadow-dom with JavaScript使用 JavaScript 将 div 隐藏在 shadow-dom 中（例如 Twitter）
【发布时间】：2019-02-26 03:06:57
【问题描述】：

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

DOM 如下图所示 - 我如何使用类 SummaryCard-image（绿色箭头）定位 DIV？如果 DIV 从 DOM 中删除，或者只是用 CSS 隐藏，对我来说并不重要。

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

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

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

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

（注意#shadow-root (open)，从上数第二个元素）

【问题讨论】：

标签： javascript tampermonkey shadow-dom

【解决方案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

【讨论】：

这时你需要使用querySelectorAll。
querySelectorAll 返回一个节点列表。你需要迭代它。
没问题。 :-)
像老板一样工作 - 谢谢，karthick。 对于未来的谷歌员工：对于 Twitter，还需要添加一个单独的 forEach 循环来捕获root.querySelector('article').style.display = 'none';