AmazonPayVersion2のボタンサイズを変える方法(非公式)

諸事情によりAmazonPayのAPIVersion2を実装することになったのですが…
作業の中でログインボタンのサイズが規定のものより小さいものが必要になりました。

が、しかしAmazonPayのSinginボタンは普通に外部からCSSを上書きするだけではサイズが変えられませんでした。
Amazonさんにお問い合わせしてもCSSで変えられますよというお返事。
ではなぜ変えられないのか・・・よくよくみてみると、shodw-rootの文字が・・・
shadow DOMなるものがあり、「構造やスタイル、挙動を隠し、同じページの他のコードと分離すること」とのこと。
CF:https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM
つまり、同じページに有りながら、通常のCSSからの影響を受けないわけです。
なので、Javascriptを使用してShadow DOMのStyleをいじってやらなくてはいけなかったのです。

当然ながらこのやり方は、Amazon側では高さ42px以上で使用してねということなのでAmazonさん側では動作保証外です。予めご了承くださいね。

CF:https://amazonpaycheckoutintegrationguide.s3.amazonaws.com/amazon-pay-checkout/amazon-pay-script.html#responsive-button-logic

詳しい方ならなんだそんなことっていう感じだと思いますが変えられずに悩んだのでメモしておきます。

var host = document.querySelector('#AmazonPaySinginButton');
//querySelector()メソッドを使って取得
var style = document.createElement( 'style' );
//スタイル作成　ボタンサイズはamazonpay-button-container にあるのでそれを変える。
style.innerHTML = ".amazonpay-button-container { height: 30px!important;min-height: 30px!important;}";
host.shadowRoot.appendChild( style );