用 hidden 属性切换源码/预览视图需同时满足 DOM 同级静态存在、CSS 不覆盖 [hidden] 默认行为、JS 清理内联样式三重前提，否则会失效或无法恢复。
用 hidden 属性切换源码/预览视图是可行的，但必须满足 DOM 结构、CSS 和 JS 三重前提，否则只是“看起来隐藏了”，实际仍频繁重建或无法恢复。
为什么直接写 el.hidden = true 有时没反应
最常见原因是 DOM 已被动态销毁或从未生成。比如在 React 或 Lit 组件中，如果预览区域是通过条件模板渲染的：${this.mode === 'preview' ? html`<div id="preview-view">...</div>` : ''}，那 id="preview-view" 根本不存在，el.hidden 就无从赋值。
另一个高频干扰项是祖先节点用了 display: contents —— 这个 CSS 值会让浏览器忽略 hidden 的语义，直接失效。
检查是否生效的最快方式是运行：document.getElementById('preview-view').offsetParent === null。若返回 false，说明它确实没被隐藏，得顺着样式和祖先节点往下查。
立即学习“前端免费学习笔记（深入）”；
DOM 结构必须满足“同级兄弟 + 静态存在”
两个视图容器（如 source-view 和 preview-view）必须是同一父元素的直接子节点，且不能嵌套：
- ✅ 正确：
<div id="editor-container"><div id="source-view"></div><div id="preview-view" hidden></div></div> - ❌ 错误：
<div id="source-view"><div id="preview-view" hidden></div></div>（嵌套导致无法互斥） - ❌ 错误：用
innerHTML = '...' + previewHTML动态插入（DOM 每次重建，hidden失去意义）
初始状态建议用 HTML 属性写死：<div id="preview-view" hidden>，避免 JS 初始化竞态。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
CSS 必须不覆盖 [hidden] 的默认行为
hidden 默认等效于 display: none，但它可被 CSS 覆盖。线上项目常因全局样式出问题：
- 检查是否存在类似
[hidden] { display: block !important; }的规则 - 确认没有对目标元素或其祖先设置
visibility: hidden或opacity: 0，这些会干扰offsetParent判断 - 父容器不能是
display: flex且子项用了position: absolute—— 这会导致布局脱离流，hidden行为不可靠
安全起见，可在 CSS 中显式加固：[hidden] { display: none !important; }，但优先排查是否真有必要。
JS 切换时别漏掉内联样式的残留
el.hidden = false 不会自动清除之前手动设置的 el.style.display = 'none'。结果就是：属性已解除，但内联样式还在，元素依然不可见。
正确做法是切换前清理：
el.style.removeProperty('display');
或者统一用 CSS 类控制（如 .view-active / .view-hidden），避免属性与样式混用。
另外，不要依赖 el.hidden 的读取值做逻辑分支 —— 它只反映 HTML 属性状态，不反映最终渲染效果。真正可靠的判断仍是 el.offsetParent !== null。
复杂点在于：一旦引入 Shadow DOM、Web Component 渲染生命周期或 SSR hydration，hidden 的时机就容易错位。这时候得配合 requestIdleCallback 或组件 updated 钩子再确认 DOM 真实状态。
