Scoped global CSS

Sometimes your template code doesn’t match your CSS. If you generate html via {@html} or have some unstyled 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.