shadow dom 是唯一原生样式隔离方案，通过 element.attachshadow({ mode: 'open' }) 创建独立子树，实现外部样式不进、内部样式不出；iframe 隔离最彻底但开销大；框架 scoped css 仅为编译时类名隔离；@scope() 是未来轻量补充方案。
HTML组件本身和样式隔离没有必然关系——是否隔离，完全取决于你用什么机制加载和渲染它。
Shadow DOM 是唯一原生样式隔离方案
它不是 CSS 技巧，也不是框架功能，而是浏览器级的 DOM 分离机制。调用 element.attachShadow({ mode: 'open' }) 后，返回的 shadowRoot 就是一个独立子树：外部样式默认进不去，内部样式默认出不来。
- Chrome 41+、Firefox 63+、Safari 10.1+、Edge 79+ 全面支持，无需 polyfill
-
mode: 'closed'会让element.shadowRoot返回null，调试困难，生产环境慎用 - 影子树不继承父级的
font-family、color等属性，需显式写inherit或重置 -
::slotted(*)只能影响 slot 中投影进来的内容，对 shadow 内部原生节点无效
iframe 隔离最彻底但开销大
每个 <iframe></iframe> 都有完全独立的 window、document 和样式作用域，天然隔离。
- 适合嵌入第三方内容（如广告、支付弹窗），或需要强沙箱的场景
- 缺点明显：无法直接共享 DOM 节点、事件通信需
postMessage、资源重复加载、SEO 不友好 - 不能用作“组件内联”方案——比如把一个按钮封装成 iframe，会破坏语义和可访问性
框架 scoped CSS 仅是编译时类名隔离
Vue 的 <style scoped></style>、Svelte 的 <style></style>、Astro 的 class:xxx，本质都是靠编译器自动加属性选择器（如 [data-v-f3f3eg9]）来模拟隔离。
- 不阻止外部样式通过更宽泛选择器（如
div p、*[id]）意外命中 - 无法防止全局重置样式（如
* { margin: 0 }）穿透生效 - 一旦开发者手动移除属性或绕过编译流程，隔离即失效
- 和 Shadow DOM 的运行时边界相比，这是纯构建时的“障眼法”
@scope() 是未来但尚未普及的 CSS 原生方案
CSS @scope 规则（2026 年起部分浏览器开始支持）允许声明一个选择器作用域根，让 .title 只匹配该范围内元素。
- 写法示例：
@scope (.card) { .title { color: #333; } } - 它不创建新 DOM 边界，也不隔离 JS 或事件，只约束 CSS 匹配范围
- 目前 Chrome 125+、Safari 17.4+ 支持，Firefox 尚未实现，
caniuse.com上仍标为“部分支持” - 不能替代 Shadow DOM，但可作为 light DOM 场景下的轻量补充
真正容易被忽略的一点是：即使用了 Shadow DOM，如果你在 shadowRoot 里动态插入了未包裹的 <style></style> 或通过 document.head.appendChild 注入样式，隔离就形同虚设。样式隔离不是“开了开关就自动生效”，而是一整套加载、注入、作用域绑定的链路控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
