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

Question

请详细说明在Svelte组件中，默认的样式作用域方式是什么，以及它是如何确保组件样式不会影响到其他组件的。如果在一个Svelte组件中定义了如下样式：<style>p { color: red; }</style>，这个样式会对哪些元素生效，为什么？

Answer 1

1. 默认样式作用域方式：
   • 在Svelte组件中，默认的样式作用域方式是局部作用域。这意味着在组件内定义的样式仅作用于该组件的内部元素，不会泄漏到其他组件或全局作用域。
2. 确保样式不影响其他组件的原理：
   • Svelte通过在编译时为组件内的HTML元素添加唯一的属性（如data-svelte-hash），并将这个属性作为选择器的一部分应用到样式中。例如，如果组件内的p标签在编译后变为<p data-svelte-123abc>，那么对应的样式p { color: red; }会被编译为p[data-svelte-123abc] { color: red; }。这样，这个样式只会匹配带有该特定属性的p元素，而其他组件中的p元素不会有这个属性，从而确保样式不会影响到其他组件。
3. 样式生效元素及原因：
   • 对于<style>p { color: red; }</style>这个样式，它会对当前Svelte组件内的所有<p>元素生效。原因是Svelte的局部样式作用域机制，编译后会将样式规则与当前组件内的<p>元素通过添加的唯一属性关联起来，所以样式仅应用于该组件内的<p>标签，而不会影响其他组件中的<p>标签。