Option to disable shadow dom

[ghost]

• [ ✔] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
Feels like many developers are just struggling to add custom features to gradio components because the shadow dom prevent javascript from reaching the components easily. I've searched a lot in the issues but none of them allows accessing shadow dom. It took me a whole day trying to figure out how to add a click event to the gallery with external javascript (added to the closing of body) but ended up deciding to switch to another framework...

Describe the solution you'd like
Just simply add an option to disable the shadow dom and make all html elements visible to external javascript will be much helpful.

Additional context
If it's not possible to disable shadow dom, I would also appreciate that if we can have an interface to load js into the whole app (instead of for individual components) or allow directly editing the html of the coponents.

[abidlabs]

Hi @ruochongChen my sense is that we do not want to disable the shadow DOM because it would break the ability for users to embed Gradio apps in other places. But I do think we should allow users to load JS into the whole app. This has been requested several times, e.g. #2137

[apolinario]

Related: #2763

[pngwn]

We have recently changed our CSS approach on main and most of our CSS is scoped by default. So we basically don't need the shadow DOM anymore. There is a PR that removes it. This doesn't make gradio very slightly less 'safe': although gradio will never touch anything outside of itself, it is possible for the embedding page to impact the gradio styles. So in short our styles are encapsulated (after a fashion) but the gradio DOM is not, and consumers will need to take note of that.

#3059