custom CSS can interfere with the hosting page

[pngwn]

Describe the bug

When e,mbedding a graido app, if that graiod app has custom CSS then it can interfere with both the hosting page and any other embedded demos.

This is because we got rid of the shadow DOM and standards css specificity rules apply.

We just need to scope the user provided CSS like we do with any other 'global' css. The lack of up to date css parsing libraries in python is annoying, so we can probably do something simpler. We only need to do this once when the app is created (we could also do it once per request but it is pointless work).

I haven't seen any reports for this so far and I don't think it is super common but it is probably the last major issue relating to our decision to remove the shadow dom.

Is there an existing issue for this?

• I have searched the existing issues

Reproduction

Something like this will trigger it:

css="a { color: pink !important}"

This will make all links on the demo and hosting page and other embedded demos pink.

Screenshot

No response

Logs

-

System Info

-

Severity

annoying

[oobabooga]

I have been experiencing the opposite issue: gradio's CSS styles are strongly interfering with the custom CSS in my gr.HTML elements.

This happens in gradio==3.18.0 but not in gradio==3.15.0.

It is forcing me to go through the tedious task of overriding gradio's styles in the source of my gr.HTML by trial and error.