How to edit CSS for app code rendered with Shadow DOM in Shopify

(This is a revised repost) Some Shopify apps have reviews, recommendations, SNS integration, and other features that are dynamically drawn with JS after the screen is displayed. And while you can usually manipulate the design, there was one app where I couldn't change the settings and couldn't manipulate it with the CSS on the template. Here's how to deal with that.

About Shadow DOM

• Due to their specifications, some apps use Javascript to dynamically load elements after the screen is displayed.

• In some cases, the loaded element is defined as Shadow DOM so that it is not affected (or applied) by the document's CSS.

• If the prerequisites are met, you can do the following:

  Prerequisite: The defined Shadow DOM mode is open.

  If open, the shadow DOM can be accessed from JavaScript written in the main page using the Element.shadowRoot property: let myShadowDom = myCustomElem.shadowRoot;

  Solution: Add a style to the obtained Element.shadowRoot to manipulate the Shadow DOM style in the Shadow Tree.

Script created

Example of adding {{ note }} anywhere in the template

In this case, we have added a process that displays the note only when it has content.

• pics-widget is a predefined element on the template. The app dynamically changes its contents, so we use MutationObserver to catch when the element changes.
• When the element switches, get the Shadow Root and append a style that specifies the height of the .wrapper element to match the screen size width.
• You can enter the embed location directly in main-product.liquid, or if you can use Custom HTML in the editor screen, you can embed it there.