面试题：Svelte中如何实现组件级别的作用域CSS

Question

在Svelte中，默认情况下CSS是作用于组件内部的。请阐述Svelte实现组件级作用域CSS的原理，并且举例说明如何在一个Svelte组件中编写具有组件作用域的CSS样式，比如为一个按钮设置独特的背景颜色。

Answer 1

Svelte实现组件级作用域CSS的原理

Svelte 通过在编译阶段为组件中的HTML元素添加唯一的属性（例如 data-svelte-hash），并在生成的CSS中使用该属性作为选择器的一部分，来实现组件级作用域CSS。这样，样式只会应用到带有特定属性的组件内部元素，而不会影响其他组件。

举例为按钮设置独特背景颜色

<script>
    // 组件逻辑部分
</script>

<button>Click me</button>

<style>
    button[data-svelte-hash] {
        background-color: blue;
    }
</style>

在上述示例中，<style> 标签内定义的样式仅作用于当前组件内的 <button> 元素，data-svelte-hash 是Svelte编译时添加的属性，确保样式的作用域局限于组件内部。