svelte style HTML that was appended to a page

I have a svelte file, which gets data in string format (HTML markup):

    import { onMount } from 'svelte';
    import { loadData } from '../stores.js';
    let content
    onMount(async() => {
        content = await loadData();

I am appending these data afterwards to the page:

      {#await content}
        <p>waiting for content...</p>
      {:then content}
        {@html content}
      <h1>Test heading</h1>

However even with styling:

      h1 {
        font-size: 5rem;
        font-style: oblique;
      p {
        font-size: 2rem;
        font-style: oblique;

appended string converted to html is obviously not generated with proper classes:

    <div class="svelte-1a8cxpf"> 
      <h1 class="svelte-1a8cxpf">Test heading</h1>
      <h1>Appended heading - not styled</h1> <!-- here is no style -->

Is there any way, how to let style also non-classed items or lets say create a more general css rule inside that particular svelte file?

Read more here:

Content Attribution

This content was originally published by Kube Kubow at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: