（修正版の再投稿です）Shopifyアプリにはレビューやレコメンド、SNS連携など画面表示後にJSで動的に描画されるものがあります。そして大抵はデザインを操作できるのですが、とあるアプリで設定が変更できずテンプレート側のCSSでも操作できない事がありました。その対応方法です。
Shadow DOMについて
-
アプリの中にはその仕様上、Javascriptを使って画面表示後に動的に要素を読み込んでいるものがある。
-
その読み込まれる要素を
Shadow DOMとして定義することによって、ドキュメントのCSSの影響を受けない（適用されない）ようにしているケースがある。 -
前提条件を満たしていれば、以下の方法で対応することが可能。
前提条件：定義されている Shadow DOM の mode が open であること
open の場合は、シャドウ DOM にメインページに書かれた JavaScript からアクセスできます。以下のように Element.shadowRoot プロパティを利用してアクセスできます。let myShadowDom = myCustomElem.shadowRoot;
対応方法：取得したElement.shadowRoot にstyleを追加して Shadow Tree 内の Shadow DOM スタイルを操作
作成したスクリプト
テンプレート内の任意の場所に{{ note }}を追加する記入例
このケースではnoteの中身があるときだけ表示する処理を加えている。
-
pics-widgetはテンプレート上にあらかじめ定義された要素。アプリはこの中身を動的に切り替えるので、MutationObserverを使って要素が切り替わるタイミングをキャッチする - 要素が切り替わるタイミングで、Shadow Rootを取得し、画面サイズ幅に合わせて
.wrapper要素の高さを指定したstyleをappendする。 - 埋め込み場所はmain-product.liquid内に直接記入しても良いし、エディタ画面でCustom HTMLが使えればそちらに埋め込む形でもOK。
