title: How to apply styles to slot element in Svelte?
body: <p>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).</p>
  <p>Here's a <a href="https://svelte.technology/repl?version=1.38.0&amp;gist=74421905020094860bce2e90625e8ed6" rel="noreferrer" title="svelte repl">Svelte REPL</a> of the following example:</p>
  <p><em>App.html</em></p>
  <pre><code>&lt;List&gt;
      {{#each items as item}}
          &lt;li&gt;&lt;a&gt;{{item}}&lt;/a&gt;&lt;/li&gt;
      {{/each}}
  &lt;/List&gt;
  
  &lt;script&gt;
      import List from './List.html'
  
      export default {
          components: {
              List
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p><em>List.html</em>:</p>
  <pre><code>&lt;h1&gt;A Special List&lt;/h1&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a&gt;Let's all be red!&lt;/a&gt;&lt;/li&gt;
      &lt;slot&gt;&lt;/slot&gt;
  &lt;/ul&gt;
  
  &lt;style&gt;
      ul a {
          color: red;
      }
  &lt;/style&gt;
  </code></pre>
  <p><em>Data</em>:</p>
  <pre><code>{
      &quot;items&quot;: [&quot;Nope&quot;, &quot;I'm good&quot;]
  }
  </code></pre>
  <p>The red coloring doesn't apply to the <code>a</code> tag elements that were added through slot.
  <a href="https://i.stack.imgur.com/YtRxl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YtRxl.png" alt="" /></a></p>
  <p>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.</p>