CSS sibling selector to target <slot> fallback

[janosh]

Describe the bug

I guess expected behavior is debatable for how a sibling CSS selector should behave for a node inside a Svelte slot. I was expecting <slot> to be invisible to the CSS selector, i.e. for it to behave as if the slot was replaced by its fallback.

Reproduction

REPL.

span color is not red in this repro, meaning the slot acts as real DOM node breaking the sibling relationship between h1 and span.

<h1>test</h1>
<slot><span>Hello</span></slot>

<style>
  h1 + span {
    color: red;
  }
</style>

Logs

No response

System Info

N/A

Severity

annoyance

[jwerre]

Try this:

h1 + :global(span) {
  color: red;
}