1

I'm trying to style tweet and make a screenshot with html2canvas. I used Twitter Widget twttr.widgets.createTweet to render tweet and then got elements from shadow-root DOM. It worked perfectly in latest Chrome browser until some days ago. Now I can't get #shadow-root element, only iframe. The code is:

<div id="tweet" tweetID="1276058326954938368"></div>

<script sync src="https://platform.twitter.com/widgets.js"></script>

<script>

  window.onload = (function(){

    var tweet = document.getElementById("tweet");
    var id = tweet.getAttribute("tweetID");

    twttr.widgets.createTweet(
      id, tweet,
      {
        conversation : 'none',
        theme        : 'light'    
      })
    .then (function (el) {
      el.shadowRoot.querySelector(".footer").style.display = "none";
    });

  });

</script>

It looked like: screenshot_1 Now it looks like: screenshot_2

Do you have any ideas? Could this be related to chrome update?

TajMiller
  • 11
  • 1
  • I believe that this is related to [a change that Twitter made to web widgets over the past month](https://twittercommunity.com/t/a-new-version-of-embedded-tweets/137894). I don't know the best resolution, but I've [seen it discussed](https://twittercommunity.com/t/widgets-createtweet-experiment/139144) on the Twitter developer forums as well. – Andy Piper Jun 29 '20 at 13:20
  • It seems to be a reason. I can't get shadow DOM when tweet has an updated design. Thank's for the link to announcement. – TajMiller Jun 29 '20 at 14:32
  • 1
    @TajMiller this is the result of the announcement Andy linked to. While the update has some minor UI improvements, it also includes significant changes under the hood. One of those changes is the use of iframes instead of custom elements. There are no plans to revert to a legacy version at this time. We do not recommend an implementation that is based on specific markup of the resulting embed as that is not a part of our publicly documented API and can change as we seek to improve the product. – aray12 Jun 30 '20 at 17:51

0 Answers0