代码片段:
<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>
输出:
当您向元素添加 css 类时,Svelte 似乎svelte-xxxx
向(正确样式的)生成的标记添加了一个附加类。它不会将相同的类添加到使用标签呈现的文本 HTML @html
,并且生成的标记没有样式,即使 CSS 选择器应该与生成的元素匹配。
在 Svelte 中以编程方式生成的 HTML 添加类名的规范方法是什么?我知道,:global
但我想将结果限制在组件范围内。
:global(...)
将修饰符与组件内的包装元素结合使用将使样式保持在范围内->