HTML组件本身不决定样式隔离，真正起作用的是加载机制：Shadow DOM是唯一原生方案，iframe最彻底但开销大，框架scoped CSS仅为编译时类名隔离，@scope()是轻量补充。
HTML组件本身不决定样式是否隔离——它只是个容器，真正起作用的是你用什么机制去加载、挂载和渲染它。
Shadow DOM 是唯一原生隔离方案
只有调用 element.attachShadow({ mode: 'open' }) 创建的影子树，才能实现浏览器级的样式边界：外部 CSS 默认进不去，内部样式默认出不来。这不是靠 class 名哈希或属性前缀“模拟”的，而是解析阶段就被跳过匹配。
-
mode: 'closed'会让element.shadowRoot返回null，调试时连 DevTools 都看不到影子树，生产环境慎用 - 影子树不继承
font-family、color等全局属性，得显式写inherit或重置 -
::slotted(*)只能影响 slot 中投影进来的内容，对 shadow 内部自己写的<button></button>无效 - 动态插入的
<style></style>（比如shadowRoot.innerHTML += '<style>...</style>'）会破坏隔离，必须用document.createElement('style')+shadowRoot.appendChild()
iframe 隔离最彻底但不能当“组件”用
<iframe></iframe> 拥有独立 document、window 和样式作用域，天然隔离。但它不是 HTML 组件的替代品，而是沙箱容器。
- 每次加载触发完整 HTML 解析 + 渲染流水线，内存和时间开销远高于 Shadow DOM
- 父子通信只能走
postMessage，无法直接访问 DOM、共享状态或事件冒泡 - 移动端 iOS Safari 对
height: 100%支持不稳定，双滚动条、焦点丢失问题频发 - SEO 不友好，且无法继承父页的
<link rel="preload">等资源提示
框架 scoped CSS 实际是编译时“障眼法”
Vue 的 <style scoped></style>、Svelte 的 <style></style>、Astro 的 class:xxx，本质都是构建阶段给 class 打哈希后缀（如 button_f3f3eg9），再让选择器带上该属性前缀（如 [data-v-f3f3eg9]）。
立即学习“前端免费学习笔记（深入）”；
- 无法阻止外部用标签选择器（
button { color: red }）或全局重置（* { margin: 0 }）穿透生效 -
v-html、dangerouslySetInnerHTML插入的内容完全不受保护 - 服务端渲染（SSR）时，服务端生成的哈希必须与客户端一致，否则 hydration 失败
- 一旦手动移除属性或绕过构建流程（比如直接写
class="button"），隔离即失效
@scope() 是轻量补充，不是替代方案
CSS @scope()（Chrome 125+、Safari 17.4+ 支持）允许声明一个选择器作用域根，比如 @scope (.card) { .title { color: #333; } }，但它不创建新 DOM 边界，也不隔离 JS 或事件。
- 只约束 CSS 匹配范围，不影响 DOM 结构、JS 执行或样式继承链
- Firefox 尚未实现，caniuse.com 上仍标为“部分支持”
- 不能用于替代 Shadow DOM，更适合 light DOM 场景下的局部收束，比如 CMS 页面区块中避免 Bootstrap 类名污染
最容易被忽略的一点是：哪怕用了 Shadow DOM，只要你在 shadowRoot 里用 document.head.appendChild 注入样式，或者把 <style></style> 写在 light DOM 里再指望它生效，隔离就形同虚设——边界还在，但通道被你自己凿穿了。
