data-*属性仅适用于初始化传参，不能作为响应式状态源；hidden和class是能触发视图更新的可靠输出通道；draggable和contenteditable需配合事件使用，不可单独依赖属性值。
data-* 属性不能当状态源，只适合做初始化传参
直接把 data-user-id 或 data-config 当作响应式状态用，会立刻踩到类型和时序两个坑：读出来全是字符串，"true" 不是 true，"42" 不是 42；而且 dataset 只映射 HTML 初始值，后续 JS 改了 el.setAttribute('data-id', '500')，组件内部不会自动感知。
常见错误现象：
- SSR 渲染的
data-count="10"被客户端 JS 读成字符串，再参与计算导致10 + 1 === "101" - 把
data-filters='{"sort":"date"}'直接JSON.parse()，没加try/catch，解析失败整个组件挂掉 - 在自定义元素
constructor()里就调this.dataset.id，此时 DOM 还没挂载，值为undefined
实操建议：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 仅用
data-*传递简单、不可变的初始化参数（如data-theme="dark"），并在组件 mount 后立刻转成对应类型存入内部 state - 结构化数据一律走
JSON.parse(el.getAttribute('data-config')) || {}，且必须包try/catch - 避免在 SSR 模板里写动态
data-值——服务端和客户端初始值不一致时，框架 diff 会出错
hidden 和 class 才是真正能驱动视图更新的全局属性
hidden 和 class 是少数几个浏览器原生支持“属性变更 → 视图重绘”的全局属性。它们不是数据容器，但能可靠地作为状态输出通道。
立即学习“前端免费学习笔记（深入）”；
关键差异：
-
hidden是布尔属性：存在即隐藏，删除即显示；旧版 Safari 需 fallback 到style.display = 'none' -
class支持增删切换：el.classList.toggle('loading')比直接操作className更安全，且能触发 CSS 重绘 -
id和tabindex也能触发行为（焦点流、样式选择器），但语义受限，不适合承载业务状态
实操建议：
- 状态机迁移后，用
el.hidden = true/false同步显隐，别用setAttribute('hidden', '')—— property 和 attribute 容易不同步 - 多状态 UI（如 loading / success / error）用 class 控制，配合 CSS 的
.state-loading .spinner这类命名空间化规则 - 避免用
title或lang控制显示逻辑——它们只影响辅助技术，不触发重绘
customElements + attributeChangedCallback 是唯一可控的手动同步路径
如果非要用 data- 传参并响应变更，必须走自定义元素路线。原生 div 或 span 加 data-，没有任何机制通知 JS “它变了”。
容易踩的坑：
-
observedAttributes里写['data-user-id']—— 错！得写['user-id']（去掉data-前缀） - 在
attributeChangedCallback里直接读this.dataset.userId—— 此时可能还没更新，应读newValue参数 - 用
this.dataset.active = 'false'修改 —— 不会触发回调，必须用this.setAttribute('active', 'false')
实操建议：
- 声明监听列表时，只列真正需要响应的属性名，避免监听所有
data- - 回调里做浅比较：
if (oldValue !== newValue)，防止重复处理 - 多个实例共享同一
data-值时，务必通过this绑定上下文，别用全局变量
draggable 和 contenteditable 这类交互型属性要配事件，不能靠属性本身
draggable="true" 和 contenteditable 是开关，不是逻辑。它们只发事件，不维护状态，也不同步内容。
典型问题：
- 设了
draggable="true"却漏掉dragover里的event.preventDefault()，拖进目标区变成禁止图标，松手无反应 - 依赖
dataTransfer.getData('text/plain')传卡片 ID，但在 Firefox 或跨 iframe 场景下返回空字符串 - 对
contenteditable元素监听input事件失败，因为默认不触发——必须手动加addEventListener('input', handler)
实操建议：
- 拖拽状态用
WeakMap存，绑定dataTransfer实例，dragend后记得delete - 同列排序别算
clientY，改用Array.from(column.children)遍历索引找插入点 -
contenteditable必须配tabindex="0"才能键盘聚焦，子元素若设user-select: none会阻断光标
复杂点在于：没有哪个全局属性能替代 JS 状态管理。它们只是边界——要么是初始化入口（data-），要么是输出出口（hidden/class），要么是事件触发器（draggable/contenteditable）。混淆角色，就会让状态在 DOM 和 JS 之间脱节。
