Best practice to style elements via Script Tag that will work consistently among different themes?

chenster
Pathfinder
104 4 10

Newbie question. I'm using Script tag to style a html table loaded with app proxy

The table looks great in one theme, e.g. Simple, but falls a part from other themes.

For example:

Simple Theme (looks good)

chenster_1-1623432617787.png

 

Debute (not so good)

 

chenster_0-1623432568689.png

 

I could adjust CSS for each theme to make it look good. But there are hundreds if not thousands themes, no way I test them all!

So what is the best approach to make elements to look consistent  across different themes?

 
Cartoo
0 Likes
mkamalkayani
Explorer
65 5 5

I also have a similar use case for my app. From what I have learnt in the past few days, every theme has a different html and css markup which makes it impossible to use the same selectors for different themes. To be 100% accurate, separate selectors for each theme can be used.

There is one exception though i.e the section id, 

When Shopify renders sections, it wraps each section in a <div> element with a unique id attribute:


 

<div id="shopify-section-[id]" class="shopify-section">
  [output of the section template]
</div>

 


Details: https://shopify.dev/docs/themes/sections

0 Likes
chenster
Pathfinder
104 4 10

Perfect, finally something can be relied on. Thanks for the tip.

For my purpose, I am using a multiple selector as fallback

document.querySelector('#EmptyCart, .cart--continue-browsing, main .wrapper, main .grid, main')?.insertAdjacentHTML('...')
 
Cartoo
0 Likes