How to apply styles to slot element in Svelte?

Question

I'd like styles declared in one module to be applied to the slot elements of that module (which get filled in in another file).

Here's a Svelte REPL of the following example:

App.html

<List>
    {{#each items as item}}
        <li><a>{{item}}</a></li>
    {{/each}}
</List>

<script>
    import List from './List.html'

    export default {
        components: {
            List
        }
    }
</script>

List.html:

<h1>A Special List</h1>
<ul>
    <li><a>Let's all be red!</a></li>
    <slot></slot>
</ul>

<style>
    ul a {
        color: red;
    }
</style>

Data:

{
    "items": ["Nope", "I'm good"]
}

The red coloring doesn't apply to the a tag elements that were added through slot.

I'm very new to Svelte, but I read through as much as I could find online, and couldn't seem to find a solution. Any help would be appreciated, thank you.

Answer 1

For those who need to style the slot container only if it exists

Create button component

<button>
  {#if $$slots['start-icon']}
    <div class="m-4">
      <slot name="start-icon" />
    </div>
  {/if}

  <slot></slot>
</button>

Usage

<button>
  <Icon slot='start-icon' />

  Button name
</button>

See Component composition / Checking for slot content