埋め込みツイートの最大幅を変更する

Question

twitterフィードを私のangle 2アプリケーションに埋め込むことを試みていますが、ツイートの最大幅の制限は250〜550ピクセル（https://dev.twitter.com/web/embedded-tweets/parameters）です。 j-queryを使用せずにmax-widthを100％に変更する方法はありますか？基本的に灰色の背景全体をカバーする必要があります。前もって感謝します。

!function (d, s, id) { 
 
     var js, 
 
     fjs = d.getElementsByTagName(s)[0], 
 
     p = 'https'; 
 
     if (!d.getElementById(id)) { 
 

 
     js = d.createElement(s); 
 
     js.id = id; 
 
     js.src = p + '://platform.twitter.com/widgets.js'; 
 
     fjs.parentNode.insertBefore(js, fjs); 
 
     } 
 
    } 
 

 
    (document, 'script', 'twitter-wjs');

.SandboxRoot { 
 
    width: 100% !important; 
 
} 
 
div { 
 
    background-color: grey; 
 
    width: 100% !important; 
 
    max-width: 100% !important; 
 
    min-width: 100% !important; 
 
} 
 
.EmbeddedTweet{ 
 
    width: 100% !important; 
 
    max-width: 100% !important; 
 
    min-width: 100% !important; 
 
} 
 
div twitterwidget { 
 
    width: 100% !important; 
 
    max-width: 100% !important; 
 
    min-width: 100% !important; 
 
}

<div> 
 
    <div> 
 
    <blockquote class="twitter-tweet" data-lang="en"> 
 
     <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw"></a> 
 
    </blockquote> 
 
    </div> 
 
</div> 
 

 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Answer 1

はいそれが可能です。

ターゲットtwitterwidget::shadowセレクタ

! function(d, s, id) { 
 
    var js, 
 
    fjs = d.getElementsByTagName(s)[0], 
 
    p = 'https'; 
 
    if (!d.getElementById(id)) { 
 

 
    js = d.createElement(s); 
 
    js.id = id; 
 
    js.src = p + '://platform.twitter.com/widgets.js'; 
 
    fjs.parentNode.insertBefore(js, fjs); 
 
    } 
 
} 
 

 
(document, 'script', 'twitter-wjs');

.SandboxRoot { 
 
    width: 100% !important; 
 
} 
 

 
div { 
 
    background-color: grey; 
 
    width: 100% !important; 
 
    max-width: 100% !important; 
 
    min-width: 100% !important; 
 
} 
 

 
twitterwidget::shadow .EmbeddedTweet { 
 
    width: 100% !important; 
 
    max-width: 100% !important; 
 
    min-width: 100% !important; 
 
} 
 

 
div twitterwidget { 
 
    width: 100% !important; 
 
    max-width: 100% !important; 
 
    min-width: 100% !important; 
 
}

<div> 
 
    <div> 
 
    <blockquote class="twitter-tweet" data-lang="en"> 
 
     <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw"></a> 
 
    </blockquote> 
 
    </div> 
 
</div> 
 

 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

を使用して