Scoped global CSS

Sometimes your template code doesn’t match your CSS. If you generate html via {@html} or have some un-styled elements inside child components, you might want to style it. However, Svelte won’t let you write CSS that doesn’t exist in the templates. You might feel forced to use :global() to make the CSS work, but that would leak it out to the rest of your app. So, instead you could try this trick:

<div>
  <Paragraph />
  <Paragraph />
  <Paragraph />
</div>
<style>
  div :global(p + p) {
    margin-top: 1rem;
  }
</style>

Now that p styling will be output by Svelte, AND it won’t leak out to the rest of your app.