Программно добавить (ограниченное) имя класса в Svelte

Фрагмент кода:

<script>
  let coloredText = "This is colored text"
    let templateString = `This text is programmatically inserted`;
  let templateHtml = `<span class = "colored">I want this text to be red</span></h1>`
  
</script>

<style>
  .colored {
    color: red;
  }

  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
    <h1>This is normal text</h1>
  <h1><span class = "colored">{coloredText}</span></h1>
    <h1>{templateString}</h1>
  <h1>{@html templateHtml}</h1>
    
</main>

Выход:

Коды и песочница

Когда вы добавляете класс CSS к элементу, Svelte, кажется, добавляет дополнительный класс svelte-xxxx к полученной разметке (с правильным стилем). Он не добавляет тот же класс к буквальному HTML, отображаемому с помощью тега @html, и результирующая разметка не стилизована, хотя селектор CSS должен соответствовать результирующему элементу.

Каков канонический способ добавить имя класса в программно сгенерированный HTML в Svelte? Я знаю о :global, но я бы хотел, чтобы результат был привязан к компоненту.