link 是 HTML 层级引入，样式全局生效；@import 是 CSS 语法，须置于非 @charset 规则前，仅在当前样式表上下文中生效且阻塞解析。
link 和 @import 的作用域差异在哪
两者都用来加载外部 CSS，但作用域表现完全不同：link 是 HTML 层级的资源引入，样式规则从文档根节点开始参与层叠；@import 是 CSS 语法，写在样式表内部，它的规则只在当前样式表的作用上下文中生效，且会阻塞后续 CSS 解析。
常见错误是把 @import 放在 style 标签中间或多个 @import 嵌套使用，导致样式加载顺序错乱、媒体查询失效，甚至触发 FOUC（Flash of Unstyled Content）。
-
@import必须写在所有非@charset规则之前，否则会被浏览器忽略 - 在
<style></style>标签里用@import，其作用域不会突破该标签的 DOM 范围，但依然参与全局层叠计算 -
link引入的 CSS 文件，无论放在还是，都会被提升为全局样式作用域
style 标签的位置如何影响选择器匹配范围
<style></style> 标签本身没有“作用域封装”，但它所处的 DOM 位置会影响它何时被解析、是否能匹配到后续动态插入的元素。关键不是“位置决定作用域”，而是“位置决定解析时机和层叠权重上下文”。
比如把 <style></style> 放在 前，它仍能匹配整个文档的元素，但若页面用了 JS 动态渲染（如 React/Vue），此时 DOM 可能还没就绪，导致样式“看似没生效”。
立即学习“前端免费学习笔记（深入）”；
- 内联
<style></style>在中：样式尽早可用，但无法访问:has()等依赖后代存在的选择器（除非配合media或supports条件） - 放在
中间：可能匹配不到前面已渲染的元素（取决于浏览器解析流），尤其在无 defer 的脚本后 - 放在
前：确保 DOM 完整，适合依赖:scope或需要精确控制层叠顺序的场景
scoped style（如 Vue 的
没有真正的 CSS 作用域，只有属性选择器模拟。Vue、Svelte 等框架的 scoped 实际是在编译时给组件内元素自动添加唯一 data 属性（如 data-v-f3f3eg9），再把所有选择器重写为带该属性的组合形式。
这意味着：它不阻止全局样式穿透，也不隔离 @keyframes 或 @font-face；父子组件间如果用了深度选择器（::v-deep / :deep()），照样能跨边界匹配。
- 子组件的
<style scoped></style>不会污染父组件，但父组件样式默认可穿透进子组件（除非子组件显式启用shadow DOM） -
:global(.btn)可以主动退出 scoped 模式，这类写法容易误伤其他组件 - 使用
!important在 scoped 样式中，仍会参与全局重要性比对，不是“局部重要”
shadow DOM 是唯一真正隔离样式的机制吗
是目前唯一由浏览器原生支持的样式作用域隔离方案。它通过边界（shadow boundary）切断继承链和选择器匹配，外部 CSS 无法穿透，内部样式也不会泄漏。
但要注意：它不是“开关一开就全隔离”，很多细节会悄悄打破预期。比如 inherit 仍能继承来自 light DOM 的部分 CSS 自定义属性（--my-color），而 em/rem 单位依然受外层字体设置影响。
- shadow DOM 内部的
<style></style>或link引入的样式，只作用于该 shadow tree，连同级 shadow root 也互不可见 - light DOM 中的类名、ID 对 shadow 内部选择器完全无效，哪怕 DOM 结构看起来是嵌套的
- 用
slot投影的内容，其样式由所在 light DOM 控制，不是 shadow 内部样式能覆盖的——这是最容易混淆的点
真正理解样式作用域，不是记住“哪个方式更安全”，而是清楚每种机制切断的是哪条链路：是解析时机？继承链？选择器匹配路径？还是层叠上下文？漏掉其中任何一环，都会在复杂组件嵌套或微前端场景下突然失效。
