Svelte开发Markdown预览器：生成HTML无法应用CSS样式求助

Svelte 默认会对组件内的样式进行作用域隔离——它会给组件内的原生元素添加唯一的属性（比如 data-svelte-hash），并自动修改 CSS 选择器来匹配这些属性。但通过 {@html} 插入的动态 HTML 元素不会被添加这些作用域属性，因此组件内的 scoped 样式无法作用于它们。

在 CSS 选择器中使用 :global() 修饰符，明确指定需要作用于动态插入元素的样式：

修改你的 <style> 部分：

<style>
.viewer :global(h1) {
  font-size: 24px;
  color: #ff0000;
}
</style>

:global() 会告诉 Svelte 不要对该选择器添加作用域隔离，这样样式就能正确应用到 {@html} 生成的 <h1> 元素上。

• 如果你需要给多个动态元素设置样式，可以批量使用 :global()，比如：

  .viewer :global(h1, h2, p) {
    /* 通用样式 */
  }
  

• 尽量避免直接使用 <style global>，因为它会让样式作用于整个应用，容易引发样式冲突。使用局部的 :global() 修饰符更安全。

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