Shadow DOM 是唯一原生样式隔离机制，需用 attachShadow({mode:'open'}) 创建；外部 CSS 默认不可入，内部样式默认不可出，但可继承属性会自然继承，须显式重置。
HTML组件本身不能替代样式隔离——它只是结构容器，不带任何样式边界能力。是否隔离，完全取决于你用什么机制加载和渲染它。
Shadow DOM 是唯一原生能实现样式隔离的 HTML 组件机制
只有调用 element.attachShadow({ mode: 'open' }) 创建的 Shadow DOM 才具备真正的运行时样式封装：外部 CSS 默认进不去，内部样式默认出不来。这不是靠命名或编译技巧，而是浏览器强制的 DOM 边界行为。
-
mode: 'closed'会让element.shadowRoot返回null，调试困难，生产慎用 - 非继承属性（如
margin、display）完全无法穿透；可继承属性（如color、font-family）会自然继承，需显式重置 -
:host和::slotted()是仅有的两个合规跨边界钩子，其余所有“穿透”写法都无效 - 动态插入的
<style>到document.head会破坏隔离，必须只在shadowRoot内注入
iframe 看似能隔离，但不是 HTML 组件的合理替代方案
<iframe> 确实拥有完全独立的样式作用域，但它不是“组件”，而是沙箱级文档容器。把它当组件用，等于把按钮、卡片这类轻量 UI 单元强行塞进另一个完整页面上下文中。
- 每次加载触发完整 HTML 解析 + 渲染流水线，内存与性能开销显著
- 父子通信只能走
postMessage，无法直接访问 DOM 或共享状态 - 移动端存在双滚动条、
height: 100%在 iOS Safari 中支持不稳定等问题 - SEO 不友好，且无法继承父页的
<link rel="preload">等资源提示
纯 HTML 标签（<template>、<div>）完全不提供样式隔离
像 <template> + cloneNode() 这类做法，只是复用 HTML 片段，没有任何样式边界。所有样式仍走全局 CSSOM，冲突风险和手写 <div class="card"> 一样高。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 常见“隔离”手法如 BEM 命名、ID 包装器（
#my-widget .button），本质是靠选择器特异性抢优先级，不是隔离 - 遇到宿主站的
* { margin: 0 }或!important规则，依然会被覆盖 - 第三方库（如 Bootstrap）注入的全局重置样式，会无差别影响 light DOM 中所有节点
- 服务端渲染（SSR）时若未同步生成相同 class 名，hydration 会失败
CSS @scope() 是轻量补充，不是替代方案
@scope() 是 CSS 原生新特性（Chrome 125+、Safari 17.4+ 支持），它只约束选择器匹配范围，不创建新 DOM 边界，也不隔离 JS 或事件。
- 写法示例：
@scope (.card) { .title { color: #333; } } - 它不能防止外部
body * { font-size: 12px }影响内部文字大小 - 对
document.querySelector、事件冒泡、CSS 自定义属性继承等毫无约束力 - 目前 Firefox 尚未实现，caniuse 标为“部分支持”，不能作为主力隔离手段
真正容易被忽略的是：即使用了 Shadow DOM，只要你在 shadowRoot 外操作样式（比如往 document.head 插 <style>），或者没处理好可继承属性的重置，隔离就形同虚设。
