hidden是布尔属性，只认“存在与否”，不解析值；写hidden="false"仍隐藏，因浏览器忽略其值，仅检测属性是否存在。
直接写 hidden 属性就生效，不用赋值、不能设 "false"，它只认“有没有”，不认“是什么”。
为什么 hidden="false" 还是隐藏
浏览器把 hidden 当作布尔属性（boolean attribute），只要属性名存在，不管值是 "false"、"0" 还是空字符串，都等价于 true。
<div hidden> ✅ 标准写法 <li><code><div hidden=""> ✅ 空字符串也触发隐藏 <li><code><div hidden="false"> ❌ 依然隐藏，值被完全忽略 <li> <code><input type="hidden" hidden>⚠️ 冗余且易混淆：type="hidden"是表单字段类型，和hidden属性语义无关- 隐藏：
el.hidden = true→ 自动添加hidden属性 - 显示：
el.hidden = false→ 自动移除该属性（不是设成字符串"false"） - 判断状态：
if (el.hidden)—— 别用el.hasAttribute('hidden')，SSR 场景下不可靠 - 注意兜底：如果之前手动设过
el.style.display = 'none'，得先清内联样式：el.style.display = ''，再设el.hidden = false，否则仍不可见 - 必须加全局兜底规则：
[hidden] { display: none !important; } - 这条 CSS 要尽早加载（比如放在
的最前或@layer base中） - 别指望 JS 后续控制来“补救”——首屏渲染发生在 JS 执行前，CSS 是唯一可靠防线
- 验证是否真隐藏：
document.getElementById('x').offsetParent返回null才算成功 - 要做淡入/高度过渡？
hidden不支持任何 CSS 动画或transition，必须先移除hidden，再加opacity或max-height类 - 需要保留占位空间（比如折叠面板锚点）？
hidden会让布局塌掉，该用visibility: hidden或opacity: 0 - 想“视觉隐藏但提交表单字段”？
hidden会让字段彻底从FormData和form.submit()中消失，该用style="position: absolute; left: -9999px" - 混用
aria-hidden="true"？语义冲突——hidden已让整个子树退出无障碍树，再加 ARIA 属性只会误导屏幕阅读器
JS 控制必须用 el.hidden = true/false
DOM 元素原生支持 hidden 作为可读写布尔属性，这是唯一推荐方式。它自动同步属性存在性，语义清晰、兼容性好（IE11+ 起全支持）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
服务端直出时一定要加 CSS 兜底
HTML 直出带 hidden，但 CSS 没加载完或 JS 还没执行，用户会看到内容闪一下（FOVC）。这不是 bug，是浏览器解析顺序导致的。
哪些地方绝对不能用 hidden
它不是万能显隐开关，边界非常明确，用错就会翻车。
最容易被忽略的是：CSS !important 规则、自定义组件 shadow DOM 隔离、以及初始内联样式残留。这些都会让 hidden “看似失效”，其实它一直按规范在工作——只是被更高优先级的样式或框架逻辑覆盖了。
