27. 样式作用域与 :global()

默认就是作用域隔离的

Svelte 组件的 <style> 标签里的 CSS 默认只对当前组件生效。你不用做任何特殊配置，样式就自动隔离了。

打个比方，组件的样式就像私人房间——只有住在里面的人（当前组件的元素）能享受到，外面的人进不来。

<!-- Card.svelte -->
<p>这是 Card 组件里的段落</p>

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

<!-- App.svelte -->
<script>
	import Card from './Card.svelte';
</script>

<Card />
<p>这是 App 组件里的段落</p>

Card 组件里的 <p> 会变成 burlywood 色，但 App 里的 <p> 不会受影响。

隔离原理

Svelte 是怎么做到样式隔离的？它在编译时给组件的元素加了一个唯一的 class，比如 svelte-123xyz，然后把这个 class 追加到 CSS 选择器上。

编译前：

p {
	color: burlywood;
}

编译后：

p.svelte-123xyz {
	color: burlywood;
}

这样选择器只会匹配当前组件内的 <p> 元素。

作用域内的 keyframes

如果组件里定义了 @keyframes，名称也会被作用域化。不用担心跟其他组件的动画名冲突。

<div class="bouncy">弹跳</div>

<style>
	.bouncy {
		animation: bounce 10s;
	}

	/* 这个 keyframe 只在当前组件内可用 */
	@keyframes bounce {
		0% { transform: translateY(0); }
		50% { transform: translateY(-20px); }
		100% { transform: translateY(0); }
	}
</style>

:global() 突破隔离

有时候你需要让样式突破组件边界。比如你用了一个第三方组件，想改它内部元素的样式。

用 :global() 包裹选择器就行。

<style>
	/* 只对 body 生效，不局限在当前组件 */
	:global(body) {
		margin: 0;
	}

	/* 对当前组件 div 内的所有 strong 生效，不管 strong 属于哪个组件 */
	div :global(strong) {
		color: goldenrod;
	}

	/* 对当前组件中带 big red 类的 p 生效，即使类是动态添加的 */
	p:global(.big.red) {
		font-weight: bold;
	}
</style>

三种 :global 用法

<style>
	/* 1. 整个选择器全局化 */
	:global(.btn) {
		color: red;
	}

	/* 2. 部分选择器全局化 */
	.wrapper :global(.btn) {
		color: blue;
	}

	/* 3. 整块全局化 */
	:global {
		.btn { color: green; }
		.input { border: 1px solid #ccc; }
	}
</style>

:global 块

如果你有很多全局样式要写，用 :global { ... } 块包裹起来更方便。

<style>
	:global {
		/* 应用于整个应用的所有 div */
		div { box-sizing: border-box; }

		/* 应用于整个应用的所有 p */
		p { line-height: 1.6; }
	}
</style>

全局 keyframes

如果你想定义全局可用的 @keyframes，在名称前加 -global- 前缀。编译时前缀会被移除。

<style>
	@keyframes -global-my-animation {
		0% { opacity: 0; }
		100% { opacity: 1; }
	}
</style>

编译后在其他地方可以直接用 my-animation 引用这个动画。

什么时候用 :global

场景	是否用 :global
组件内部元素样式	不用，默认隔离就好
修改第三方组件内部样式	用 :global()
全局重置样式（body/html）	用 :global()
动态添加类名的样式	用 :global() 或 p:global(.class)
主题色定义	用 :global {} 块

作用域样式的特异性

由于作用域 class 的存在，组件内样式的特异性会比全局样式高 0-1-0。有时候同一选择器需要多次添加作用域 class，Svelte 会在第一次之后用 :where(.svelte-xxx) 避免进一步提高特异性。

/* 编译后的选择器示例 */
/* 第一次加 .svelte-xxx 提高特异性 */
p.svelte-123xyz { color: red; }

/* 后续用 :where() 不提高特异性 */
.svelte-123xyz p:where(.svelte-123xyz) { color: blue; }

本节回顾

• Svelte 组件的 <style> 默认是作用域隔离的，只对当前组件元素生效
• 隔离原理是编译时给元素和选择器添加唯一的 hash class
• @keyframes 也会被作用域化，不会跟其他组件冲突
• :global() 可以让单个选择器突破隔离
• :global { } 块可以让整段样式全局化
• 全局 keyframes 用 -global- 前缀声明
• 尽量少用 :global，保持样式隔离的干净性