svelte - 使用 Svelte，如何在 <svelte :head> with a Javascript string variable? 中填充 &lt;style&gt; 标记

Question

使用 Svelte，我想要完成的是能够为我的 html 设置样式使用 css post 的属性(property)我有的对象。

我想，没问题，只需在我的svelte:head 中添加一个样式标签即可与 {post.css} .它会丢弃我的post.css数据直接进入样式标签，中提琴，问题解决了。但是，不，问题没有解决。当我在浏览器中查看元素时，我看到了

<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 的属性(property)对象，或者知道如何让 Svelte 识别 {post.css}在 <style>标签，请告诉我。

Answer 1

你可以这样做:

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

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

Demo