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

[chenster]

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)

Debute (not so good)

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?

[mkamalkayani]

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

[chenster]

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('...')