WebサイトにTwitterの投稿を埋め込む際に、横幅を調節する

やりたいこと

TwitterのWidgetでは幅が500ピクセルに固定されていますが、これをレスポンシブのサイトに埋め込むと酷くダサいことになるので、横幅をあわせたい。

実装

<script>
$(function(){
  var setWidth = function() {
    $('twitter-widget.twitter-tweet').each(function(index, element) {
      element.style.width = "100%";
      element.style.maxWidth = "100%";

      var tweet = element.shadowRoot.querySelector(".EmbeddedTweet");
      tweet.style.width = "100%";
      tweet.style.maxWidth = "100%";
    });
  };
  setInterval(function() {
    setWidth();
  }, 1000);
});
</script>

ポイント

JavaScriptでshadowRootの要素を弄る。