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

Question

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

DOM 看起来像下图 - 我如何将 DIV 与 class SummaryCard-image（绿色箭头）定位？ DIV 是从 DOM 中删除，还是只是用 CSS.

隐藏，对我来说都没有关系

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

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

注入 CSS

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

$('.SummaryCard-image').length returns 0

(Note the #shadow-root (open), 2nd element from the top)

Answer 1

您需要先 select 影子根才能遍历到该元素。你需要这样的东西

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

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

Hide div inside (e.g. Twitter) shadow-dom with JavaScript

javascript

shadow-dom

tampermonkey