Open pikeas opened 2 years ago
I just sanity checked this with dummy components:
<script lang="ts">
import Outer from "$lib/foo/Outer.svelte"
</script>
<Outer />
<script lang="ts">
import Inner from "./Inner.svelte"
</script>
<div>Outer 1</div>
<div><Inner foo="inner" /></div>
<div>Outer 2</div>
<style>
* > :global(.inner) {
color: red;
}
</style>
<script lang="ts">
export let foo = ""
</script>
<div class={foo}>Inner</div>
This works as expected so svelte-headlessui is doing something funky. Maybe related to using class
as the prop name?
The plot thickens!
For RadioGroup
:
* > :global(label)
does not work* :global(label)
worksFor Dialog
:
* > :global(h2)
does not work* :global(h2)
also does not work!Ah, just found this docs note:
This rule won’t work properly inside a portal, which means that it won’t work properly for a \<Dialog>. To style the \<Dialog>, you will need to either 1) use global styles without the * > scoping, 2) put a wrapper element inside the \<Dialog> and style that instead, or 3) use one of the other styling approaches.
I think that explains everything I've seen. Definitely surprising!
I'll keep this open for the RadioGroup behavior - should this work with and without the descendant selector?
Describe the bug Scoped global styling doesn't seem to work. Classes are being applied and the component is reactive, so the issue is specifically around style scoping.
To Reproduce
MyComponent is exactly copied from https://svelte-headlessui.goss.io/docs/general-concepts#the-global-modifier, the version using a wrapper div and
* > :global(.checked)
.