Repository: svelte
Issue: CSS + combinator not applied to svelte:elements in #each loop
Labels: css

[Reproduction in Svelte REPL Playground v5.16.1](https://svelte.dev/playground/40132de4874a41d99556dbecc84960cf?version=5.16.1)

## Describe the problem

When using `#each loop`, CSS `+` combinator is not being recognized as used (and thus it's absent in generated CSS):

```svelte
<script>
  let list = [1, 2 ,3]
</script>

{#each list as value}
  <svelte:element this={'p'}>Style not applied</svelte:element>
{/each}

<style>
  p + p {
    color: red;
  }
</style>
```
```
"code": "css_unused_selector"
"message": "Unused CSS selector "p+p" https://svelte.dev/e/css_unused_selector"
```

But when multiple `svelte:element` are defined one at a time, it works:

```svelte
<svelte:element this={'p'} />
<svelte:element this={'p'}>Style applied</svelte:element>

<style>
  p + p {
    color: red;
  }
</style>
```

If I make it `p + p + p` in the example above, it shows `css_unused_selector` too, because it knows there are only 2 unknown elements. Adding a 3rd one makes it happy once again:

```svelte
<svelte:element this={'p'} />
<svelte:element this={'p'} />
<svelte:element this={'p'}>Style applied</svelte:element>

<style>
  p + p + p {
    color: red;
  }
</style>
```

Which means that based on multiple defined `svelte:element`, Svelte seems to be able to recognize that the selector might be applied, so it has to be present in generated CSS.

### Why not use `:global` style?

Two reasons:

1. Because of how CSS specificity works, `:global(p + p)` is not applied when there is a style already defined for `p` in the component:

```svelte
<svelte:element this={'p'}>Both elements</svelte:element>
<svelte:element this={'p'}>are red</svelte:element>

<style>
  p {
    color: red;
  }

  :global(p + p) {
    /* not applied because of CSS specificity */
    color: green;
  }
</style>
```

It would require some additional tweaking to make it work, like adding some classes, which seems messy, clumsy and unnecessary.

2. For my use case, this style belongs to the specific component. It doesn't make sense to make it `:global` when it is not used anywhere else.

### Possible solution

Svelte's understanding of the dynamicity of `svelte:element` doesn't seem to apply to `#each` loops. Possibly it's the unpredictability of the number of rendered elements that causes this problem.

One way to handle it would be to disable `css_unused_selector` altogether when there is `svelte:element` in `#each` loop. Possibilities are endless in such case, both in terms of what kind of elements and how many of them will appear. So to me it would make sense allow basically any CSS combinators with any number of elements.

### Workaround until it is fixed

Adding multiple `svelte:element` (even as unreachable code, like below) does the trick:

```svelte
{#if false}
  <svelte:element this={''} />
  <svelte:element this={''} />
{/if}
```

To make it work for `p + p + p` there would have to be 3 of them and so on, so it is obviously not ideal. But at least it's just an additional piece of code that can be easily removed later, when the issue is fixed, without adjusting anything else in the actual code.

There is another thing that I described in the playground where when **another** component has **exactly** the same style, it suddenly makes it work in the component with `p + p` combinator with `svelte:element` in `#each` loop. I have already spent much more time than anticipated on describing this though, and maybe it should be placed in another issue anyway, so that's it for now.

### Reproduction

[Reproduction in Svelte REPL Playground v5.16.1](https://svelte.dev/playground/40132de4874a41d99556dbecc84960cf?version=5.16.1)

### System Info

```shell
Svelte REPL Playground
Version 5.16.1
```

### Severity

annoyance