data-*属性不能触发视图更新，仅作初始化字符串传参；hidden和class是唯一能可靠驱动重绘的全局属性；自定义元素配合observedAttributes与attributeChangedCallback才能实现轻量响应式闭环。
HTML 全局属性本身不提供数据绑定能力，所谓“基于全局属性构建绑定引擎”，本质是用 data- 做初始化传参、用 hidden 和 class 做状态输出通道、靠自定义元素生命周期捕获变更——三者配合，才能跑通轻量闭环。
为什么不能直接用 data-* 触发视图更新
浏览器对 data- 属性的变更完全无感：不重绘、不重排、不通知 JS。你写 el.setAttribute('data-count', '5')，CSS 不会变，attributeChangedCallback 也不会触发（除非该元素是自定义元素且声明了 observedAttributes）。
- 常见错误现象：在普通
<div>上反复改data-status，期望 CSS 选择器[data-status="loading"]自动生效 —— 实际上它只匹配初始 HTML 中写死的值 -
dataset是只读映射，修改el.dataset.count = "5"不会同步到 DOM 属性，后续getAttribute('data-count')仍返回旧值 - SSR 渲染后客户端 JS 修改
data-，框架 diff 阶段可能忽略该变更，导致首屏与交互态不一致
真正能驱动视图的全局属性只有 hidden 和 class
hidden 和 class 是少数几个属性变更能直接触发浏览器重绘的全局属性。它们不是数据容器，但可作为“状态出口”可靠使用。
-
hidden是布尔属性：存在即隐藏，删除即显示；旧版 Safari 需 fallback 到style.display = 'none' -
class支持增删切换：el.classList.toggle('loading')比直接拼className更安全，也避免重复类名 - 别用
title、lang或contenteditable控制显隐逻辑——它们只影响辅助技术或编辑行为，不触发样式重计算 - 多状态 UI（如
loading/success/error）必须用class，配合命名空间化 CSS 规则，例如.state-loading .spinner
customElements.define() 是唯一可控的响应式入口
只有自定义元素能通过 observedAttributes + attributeChangedCallback 捕获属性变更，并在其中完成数据解析、类型转换和视图同步。这是目前最轻量、兼容性好（Chrome 67+ / Firefox 63+ / Safari 16.4+）、且真正基于 HTML 模板的路径。
立即学习“前端免费学习笔记（深入）”；
- 只监听标准属性名，例如
static get observedAttributes() { return ['user-id', 'avatar']; }，不是data-user-id - 在
attributeChangedCallback(name, oldValue, newValue)中做类型转换：parseInt(newValue, 10)或newValue === 'true'，避免字符串陷阱 - 不要在
constructor()中操作 DOM 子节点——此时元素尚未挂载，this.shadowRoot或this.querySelector都为null - 推荐在
connectedCallback()中首次渲染，初始值来自this.getAttribute('user-id')或 fallback 到内部默认值
data-* 只适合存静态、不可变的初始化元数据
结构化数据（如 JSON）必须走 JSON.parse(el.getAttribute('data-config')) || {}，且必须包 try/catch；数字、布尔等类型必须手动转换，否则 data-count="42" → el.dataset.count === "42"，参与运算就是 "42" + 1 === "421"。
- 适用场景仅限：状态只服务于当前元素或其直系子元素、不依赖异步、无需跨组件同步、可由 DOM 直接推导（如折叠面板
data-expanded="true"） - 一旦出现「多个组件响应同一变化」或「需持久化到 localStorage」，就必须交给 JS 变量、
useState或 store 管理，而不是往 DOM 上堆data- - 服务端模板里避免动态生成
data-值——服务端和客户端初始值不一致时，框架 diff 会出错 -
id查询是 O(1)，class匹配依赖选择器引擎，深层嵌套下有性能感知；而data-查询（querySelector('[data-id="123"]')）在复杂 DOM 中明显更慢
真正的难点不在怎么写，而在边界判断：什么时候该用 class 控制显隐，什么时候该交由 JS state 管理；data- 传参后是否立刻转成内部状态；自定义元素中哪些逻辑必须塞进 connectedCallback 而不是 attributeChangedCallback。这些决策点稍不注意，轻则视图不同步，重则整个组件挂掉。
