HTML组件样式隔离取决于加载机制：Shadow DOM是唯一原生方案，iframe最彻底但开销大，框架scoped CSS仅为编译时类名隔离，纯HTML需手动属性前缀或BEM命名。
HTML 组件本身不自带样式隔离能力，是否隔离完全取决于你用什么机制来加载和渲染它——原生 <template>、<iframe>、Web Components，还是框架封装的“组件”（如 React/Vue 的 scoped CSS），行为天差地别。
Web Components 的 Shadow DOM 是唯一原生样式隔离方案
只有启用 ShadowRoot 的元素（比如用 element.attachShadow({mode: 'closed'}) 创建）才能天然阻断外部 CSS 泄露，同时防止内部样式逃逸。外部样式默认无法穿透 ::slotted 以外的 Shadow 边界，内部样式也不会污染全局。
-
mode: 'open'允许 JS 通过element.shadowRoot访问，调试友好；'closed'则彻底封死，但会禁用 DevTools 的 Shadow DOM 检查 - 伪类如
:host、:host-context()只在 Shadow 内生效，不能写成.my-comp :host—— 这种写法无效 - 全局字体/颜色变量（
font-family、--main-color）仍会继承，不是“完全隔离”，需显式重置或使用all: initial
iframe 是最彻底的隔离，但成本最高
<iframe> 拥有独立 document、CSSOM、JS 执行环境，连 window 和事件冒泡都完全隔开。适合嵌入第三方内容或强边界需求（如微前端子应用），但带来显著开销：
- 每次加载触发完整 HTML 解析 + 渲染流水线，内存占用翻倍
- 父子通信必须走
postMessage，无法直接访问 DOM 或共享状态 - SEO 不友好，且无法继承父页面的
prefetch、preload资源 - 移动端双滚动条、焦点管理、缩放适配问题频发，尤其 iOS Safari 对
iframe的height: 100%支持不稳定
框架级“样式隔离”本质是编译时加前缀，非运行时隔离
Vue 的 <style scoped>、React 中的 CSS Modules 或 emotion 的 css 函数，都是构建阶段给 class 名打哈希后缀（如 button_abc123），再让 CSS 选择器带上该后缀。这能避免 class 名冲突，但：
立即学习“前端免费学习笔记（深入）”；
- 无法阻止外部 CSS 用属性选择器（
[data-v-xxx]）、标签选择器（button { color: red }）或全局规则影响组件 - 若组件内用了
!important或高优先级权重（如#app .my-btn），依然可能被覆盖 - 动态插入的 DOM（如
v-html、dangerouslySetInnerHTML）不受 scope 保护，样式可任意穿透 - SSR 场景下，服务端生成的 scoped class 必须与客户端一致，否则 hydration 失败
纯 HTML 组件（无 JS 框架）如何低成本实现样式隔离？
如果只是复用 HTML 片段（比如用 <template> + cloneNode()），又不想引入 Web Components 或 iframe，可行路径极少：
- 手动为每个组件根节点加唯一 ID 或 data 属性（如
data-component="header-v2"），所有 CSS 规则强制以该属性为前缀：[data-component="header-v2"] h1 { margin: 0 } - 用
CSSStyleSheet.insertRule()动态注入仅作用于当前实例的 style 块，配合getComputedStyle避免重复插入 - 绝对避免使用全局 class 名（如
.btn、.card），改用 BEM 风格的长命名（.header-v2__title），降低误覆盖概率 - 警惕
@import和link[rel=stylesheet]的加载顺序：后加载的 CSS 优先级更高，可能意外覆盖组件内联样式
真正需要样式隔离时，别幻想“纯 HTML”能搞定——要么接受 Shadow DOM 的兼容性折损（Safari 10.1+、Chrome 53+），要么接受 iframe 的性能代价。所谓“推荐策略”，本质是在隔离强度、维护成本、浏览器支持三者之间做明确取舍，而不是找一个万能解。
