title: Hide div inside (e.g. Twitter) shadow-dom with JavaScript
body: <p>Using TamperMonkey to streamline page view on my side, and wish to hide part of the externally-sourced Twitter card(s) from printing. The image in the EmbeddedTweet does not print anyway, and leaves a large empty rectangle that wastes valuable space.</p>
  
  <p>The DOM looks like the image below - how would I target the DIV with class <code>SummaryCard-image</code> (green arrow)? It doesn't matter to me if the DIV is removed from the DOM, or just hidden with CSS.</p>
  
  <p>I have tried the below methods, which do not work:</p>
  
  <p>(1) Injecting CSS with <code>.SummaryCard-image{display:none !important;}</code></p>
  
  <p>(2) jQuery: <code>$('.SummaryCard-image').remove();</code></p>
  
  <p><code>$('.SummaryCard-image').length</code> returns <code>0</code></p>
  
  <blockquote>
    <p>(Note the <code>#shadow-root (open)</code>, 2nd element from the top)</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/mPlna.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mPlna.jpg" alt="enter image description here"></a></p>