CSS specificity issue with :global()

Describe the bug usually, the CSS specificity is id > class > tag. but when using global style syntax, the class is not taking president over the Tag.

To Reproduce svelte REPL

Expected behavior I would expect that in the case of

<p class="class">secret stuff</p>

the following style

<style>
  :global(.class){ 
    /* some style */ 
  } 
</style>

will override styled Tag with

<style>
  p{ 
    /* some style */
  }
</style>

Information about your Svelte project:

• browser version: any

• operating system: OS X 10

• Svelte version: v3.29.0

Severity I think this is kind of severe, but I may be missing some background on this specific use-case

Additional context working on a table component and want to override styles from the outside

<style>
  :global(.td){
    color: red;
  }
}
</style>

<MySuperTableComp data={somedata} />

[galangel]

@mosheduminer, Amazing, thank you.

[Conduitry]

I think I’m more inclined to say that this is not a bug, but a gotcha. Scoped styles on p are compiling to p.svelte-123xyz, which has a higher specificity than .class. One way to increase the specificity of .class is to use the selector .:global(.class.class) instead. I don’t think we want Svelte to be doing anything to change the selectors that appear inside :global()s.