面试题：Svelte中组件样式的局部作用域实现方式

Question

在Svelte组件中，如何确保组件内的CSS样式只作用于该组件，不会影响到其他组件？请详细描述实现原理及至少一种具体实现方式。

Answer 1

实现原理

Svelte通过将组件内的CSS样式进行局部作用域处理来确保其只作用于该组件。它会为组件生成唯一的标识符，然后将这个标识符添加到组件内所有样式规则的选择器上，从而使这些样式仅对该组件内的元素生效，不会影响到其他组件。

具体实现方式

在Svelte组件文件（.svelte）中，直接在<style>标签内编写CSS样式，Svelte会自动将这些样式限定在组件范围内。例如：

<script>
    // 组件逻辑代码
</script>

<style>
    p {
        color: blue;
    }
</style>

<p>这是组件内的文本，它的颜色会是蓝色，且此样式不会影响其他组件中的p元素。</p>

这种方式简单直接，无需额外的配置，Svelte在构建过程中会自动处理样式的作用域问题。