使用 Svelte，如何使用 Javascript 字符串变量填充 <svelte:head> 中的 <style> 标记？

Question

使用 Svelte，我想要完成的是能够html使用我拥有css的post对象的属性来设计我的样式。

我想，没问题，只需在我的svelte:headwith 中添加一个样式标签{post.css}。它会将我的post.css数据直接放入样式标签中，viola'，问题解决了。但是，不，问题没有解决。当我在浏览器中查看元素时，我看到

<style>{post.css}</style>

代替

<style>
  p{
    color: purple;
    font-weight: 900;
  }
 </style>

我创建了一个解决办法，我在那里设置innerText了的<style>后标签onMount，但我不喜欢它，宁愿做它一个更清洁的方式。

我想要的是…

<script>
  export let post = {
    html: `<p>This is purple</p>`,
    css : `
      p{
        color: purple;
        font-weight: 900;
      }
    `
    }  
</script>

<svelte:head>
  <style>{post.css}</style>
</svelte:head>

{@html post.html}

我必须做些什么才能让它发挥作用……

<script>
  import { onMount } from "svelte";

  export let post = {
    html: `<p>This is purple</p>`,
    css : `
      p{
        color: purple;
        font-weight: 900;
      }
    `
    }

  onMount(() => {
    let styler = document.getElementById("styler");
    styler.innerText = post.css
  });
</script>

<svelte:head>
  <style id="styler"></style>
</svelte:head>

{@html post.html}

如果您有任何其他替代方法可以使用该css属性来html设置post对象属性的样式，或者知道如何让 Svelte{post.css}在<style>标签中进行识别，请告诉我。

Answer 1

你可以这样做：

{@html `<style>${post.css}</style>`}

请记住，中的样式post.css将应用于整个页面，而不仅仅是帖子的 HTML。

演示