dataset 不能作为 SPA 的响应式状态源，因为它是只读快照、值全为字符串、不触发重绘且无法自动同步变更；class 和 hidden 才是唯一可靠的状态输出通道。
HTML 全局属性本身不维护状态，data-* 只提供初始化字符串传参能力，真正在单页应用中“维持状态”的只有 class、hidden 这类能触发浏览器原生重绘或行为变更的属性。
为什么 dataset 不能作为 SPA 的响应式状态源
dataset 是只读快照，只映射 HTML 初始解析时的 data- 值；后续 JS 调用 el.setAttribute('data-id', '500') 不会自动同步到组件内部状态，框架也无法基于它做 diff 或 re-render。
- 读出来全是字符串：
data-active="true"→this.dataset.active === "true"，不是布尔值，直接参与逻辑判断会出错 - SSR 渲染的
data-count="10"在客户端被 JS 读成字符串，10 + 1得到"101" - 把
data-config='{"theme":"dark"}'当 JSON 解析却不加try/catch，JSON.parse()报错导致整个组件初始化中断 - 在自定义元素
constructor()中就访问this.dataset.id，此时 DOM 尚未挂载，值为undefined
class 和 hidden 是唯一可靠的状态输出通道
它们是少数几个属性变更后，浏览器会立即触发样式重绘、可访问性树更新或焦点流调整的全局属性——框架（如 Alpine.js、htmx）或手写逻辑才能据此做出反应。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
hidden是布尔属性：存在即隐藏，移除即显示；但旧版 Safari/IE 不支持，需 fallback 到el.style.display = 'none' - 用
el.hidden = true/false操作 property，别用setAttribute('hidden', '')—— attribute 和 property 容易不同步 -
class支持安全增删：el.classList.toggle('loading')比直接改className更健壮，且能触发 CSS 动画和选择器匹配 - 多状态 UI（如
loading/success/error）建议用 class 控制，配合命名空间化 CSS 类名（如.state-loading .spinner）
如果非要让 data- 参与状态流转，必须走自定义元素路线
原生 div、span 加 data- 属性，没有任何机制通知 JS “它变了”。只有通过 customElements + attributeChangedCallback 才能手动桥接。
立即学习“前端免费学习笔记（深入）”；
- 必须在
static get observedAttributes()中声明属性名（不含data-前缀），例如return ['user-id', 'active'] - 监听的是 attribute 变更，不是 dataset 更新；
this.dataset.userId仍是只读缓存，应优先用this.getAttribute('user-id') - 在
attributeChangedCallback里做类型转换和状态同步，例如把"true"转成布尔、把"42"转成数字 - 避免在
constructor()或connectedCallback()早期生命周期里读取子节点内容，shadowRoot或innerHTML可能尚未就绪
真正容易被忽略的是：状态源头必须唯一明确。用 data- 初始化后，后续所有状态变更都该走 JS 内部 state → 同步到 class/hidden，而不是反复来回操作 data- 属性——那只会让 DOM 和逻辑脱节，调试时根本分不清谁改了谁。
