Note: This is not a typical "em vs rem vs px" debate, as there's a rather important caveat.

I am making an embeddable widget that runs via a script tag and one root div being placed on the target page. I'm used to used rem for all of my sizes and using the 62.5% trick, but this is not a viable option for me because the root of my widget may have one size, but the root of the client's site could have another. This would mean all my elements with rem dimensions go wild.

Is there a way to indicate that my root is the one to follow? Or is there some other way of determining my own root font-size independent of the target site?

I've also considered using just em, and doing something like this:

#my-root * {
  font-size: 62.5%
}

The idea being that I could then still use a decimal-based sizing system, although this would obviously become complicated as soon as I try to use a larger/smaller font size.

Is it best just to forego all of that and jsut use px? What are the best practices for third-party javascript widgets?