附加到页面的苗条样式 HTML

Question

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

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

I am appending these data afterwards to the page:

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

However even with styling:

    <style>
      h1 {
        font-size: 5rem;
        font-style: oblique;
      }
    
      p {
        font-size: 2rem;
        font-style: oblique;
      }
    </style>

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 -->
    </div>

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?

Answer 1

this github issue answers your question. What you have to do is

<style global>
/*styles*/
</style>

or

<style>
a:global {
 /* styles */
}
</style>