附加到页面的精巧样式 HTML

Question

我有一个 svelte 文件，它以字符串格式（HTML 标记）获取数据：

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

之后我将这些数据附加到页面：

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

但是即使有样式：

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

转换为 html 的附加字符串显然不是用正确的类:

生成的

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

有什么办法，如何让非分类项目也有样式，或者说在那个特定的 svelte 文件中创建一个更通用的 css 规则？

Answer 1

this github issue 回答了你的问题。你要做的是

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

或

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

附加到页面的精巧样式 HTML

svelte style HTML that was appended to a page

svelte