svelte组件默认样式局部化是通过编译时为css添加唯一属性选择器（如svelte-123abc）实现，而非shadow dom；:global()仅放行括号内选择器，需避免嵌套与误用，全局样式应统一管理于app.css而非组件内style块。
为什么Svelte组件默认样式是局部的
Svelte在编译时会为每个组件的CSS自动添加唯一属性选择器（如 svelte-123abc），让样式只作用于当前组件DOM节点。这是默认行为，不是靠Shadow DOM实现的，而是通过CSS重写+属性标记完成的。这意味着：.button { color: red; } 在组件内只会匹配带该svelte属性的.button元素，外部同名类完全不受影响。
:global() 修饰符怎么用才不踩坑
当需要穿透局部作用域影响子组件、第三方组件或全局节点（如body、html）时，必须显式使用:global()。它只作用于括号内的选择器部分，且不能嵌套使用。
-
:global(.highlight)→ 匹配所有.highlight类，无论在哪 -
.container :global(.btn)→ 只匹配.container内部的.btn（.container仍受局部作用域保护） -
:global(body) { background: #eee; }→ 全局生效，但注意：Svelte不阻止重复定义，多个组件同时写这个会导致样式覆盖不可控 - 错误写法：
:global(.a .b) { ... }——:global()只包裹最外层选择器，中间的.b仍被局部化；应写成:global(.a) :global(.b) { ... }或直接:global(.a .b) { ... }（此时整个选择器被放行，但需确认浏览器支持）
全局样式该不该放进<style></style>里
能不用就不用。把全局规则（如重置样式、字体定义、主题变量）硬塞进某个Svelte组件的<style></style>块，会导致加载时机不可控、复用困难、热更新异常。更合理的方式：
- 在
src/app.css中写全局样式，并在main.js里import './app.css' - 需要动态注入时，用
document.styleSheets或document.head.appendChild手动追加<style></style>标签 - 若必须用
:global()做微调（例如覆盖第三方UI库某处样式），确保它出现在真正使用该样式的组件中，而非父组件——否则编译后可能因节点未挂载而失效
遇到:global()不生效的常见原因
不是语法写错，就是作用时机或层级不对：
- 目标元素是异步渲染的（比如
{#if show}<div class="modal">...</div>{/if}），但:global(.modal)样式在show = false时已被移除（Svelte会清理未挂载组件的样式） - 第三方组件用了
$$props透传class，但没把class值真正绑定到根元素上，导致:global()找不到对应节点 - 使用了
contenteditable或iframe等特殊上下文，CSS作用域规则本身不适用 - 开发时开了HMR（热模块替换），旧样式未被清除，新
:global()规则被浏览器忽略——强制刷新页面再试
局部样式和:global()混用时，优先级由CSS特异性决定，跟是否“全局”无关；别指望:global()能天然提高权重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
