如何在Svelte中为程序化生成的HTML添加作用域类名？

代码示例 #

<script>
  let coloredText = "This is colored text"
  let templateString = `This text is programmatically inserted`;
  let templateHtml = `<span class="colored">I want this text to be red</span></h1>`
</script>

<style>
  .colored {
    color: red;
  }

  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
    <h1>This is normal text</h1>
  <h1><span class="colored">{coloredText}</span></h1>
    <h1>{templateString}</h1>
  <h1>{@html templateHtml}</h1>
</main>

输出效果 #

问题背景 #

Svelte会给组件内的元素自动附加svelte-xxxx类实现样式作用域，普通元素能正常匹配样式；但通过{@html}渲染的原生HTML不会被添加这个作用域类，就算CSS选择器匹配，也无法应用样式。需要在不使用:global的前提下，给程序化生成的HTML添加类名并保持样式作用域在组件内。

标准解决方案 #

1. 手动注入组件的作用域类 #

通过绑定组件根元素，获取Svelte自动生成的作用域类名，再把这个类名拼接到动态生成的HTML元素的class属性中，让样式能匹配到元素：

<script>
  let coloredText = "This is colored text"
  let templateString = `This text is programmatically inserted`;
  // 绑定根元素以获取作用域类
  let mainElement;
  $: scopeClass = mainElement?.classList?.find(cls => cls.startsWith('svelte-')) || '';
  // 生成HTML时附加作用域类
  let templateHtml = `<span class="colored ${scopeClass}">I want this text to be red</span>`
</script>

<style>
  .colored {
    color: red;
  }

  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main bind:this={mainElement}>
    <h1>This is normal text</h1>
  <h1><span class="colored">{coloredText}</span></h1>
    <h1>{templateString}</h1>
  <h1>{@html templateHtml}</h1>
</main>

2. 改用组件化渲染（更推荐） #

如果动态内容结构复杂，直接放弃拼接HTML字符串，把动态内容封装成独立的Svelte组件，这样样式作用域会自动生效，逻辑也更易维护：

<!-- 子组件 ColoredText.svelte -->
<script>
  export let text;
</script>

<style>
  .colored {
    color: red;
  }
</style>

<span class="colored">{text}</span>

主组件调用：

<script>
  import ColoredText from './ColoredText.svelte';
  let coloredText = "This is colored text"
  let templateString = `This text is programmatically inserted`;
</script>

<style>
  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
    <h1>This is normal text</h1>
  <h1><span class="colored">{coloredText}</span></h1>
    <h1>{templateString}</h1>
  <h1><ColoredText text="I want this text to be red" /></h1>
</main>

3. 通过CSS变量传递样式 #

如果只是简单的样式需求，可以用CSS变量传递样式，变量会继承到{@html}渲染的元素中，同时保持样式作用域：

<script>
  let coloredText = "This is colored text"
  let templateString = `This text is programmatically inserted`;
  let templateHtml = `<span class="colored">I want this text to be red</span>`
</script>

<style>
  :root {
    --colored-color: red;
  }
  .colored {
    color: var(--colored-color);
  }

  main {
    font-family: sans-serif;
    text-align: center;
  }
</style>

<main>
    <h1>This is normal text</h1>
  <h1><span class="colored">{coloredText}</span></h1>
    <h1>{templateString}</h1>
  <h1>{@html templateHtml}</h1>
</main>

内容的提问来源于stack exchange，提问作者SoZettaSho