html无法实现深度状态监控，所有监控均依赖javascript；自定义元素通过observedattributes和attributechangedcallback捕获data-*变更；表单状态须操作property而非attribute；hidden和class是唯一可靠的视图输出通道；mutationobserver不能替代状态管理。
HTML 本身不能实现“深度状态监控”，它没有状态概念、无运行时能力、不触发监听、也不维护数据一致性——所有你以为的“监控”，实际都依赖 JavaScript 驱动的机制，且必须明确区分「属性变更」、「property 同步」和「DOM 视图输出」三层行为。
attributeChangedCallback 是唯一能响应 data-* 变更的入口
原生 HTML 元素（如 div、span）对 data- 属性修改完全无感；只有自定义元素配合 static observedAttributes 和 attributeChangedCallback 才能捕获这类变化。
- 必须在类上声明
static observedAttributes = ['mode', 'disabled']（不含data-前缀） -
attributeChangedCallback(attrName, oldValue, newValue)中，oldValue和newValue恒为字符串，需手动转换类型：例如const isEnabled = newValue === 'true' - 常见错误：直接在回调里调用
this.#input.setAttribute('checked', '')—— 这不会同步视觉状态，因为浏览器只响应input.checked这个 property
checked、value 等状态必须走 property，而非 attribute
对于内置表单控件，checked、value、selected 等是典型的“控制实时状态”的 property；而对应 attribute（如 checked 属性）仅影响初始渲染。两者长期不一致是正常现象，强行用 setAttribute 同步必然导致视图错乱。
- 对外暴露的
checkedgetter/setter 必须直接读写this.#input.checked，不是this.getAttribute('checked') - 在
connectedCallback中初始化一次：this.#input.checked = this.hasAttribute('checked')，之后彻底信任 JS property - 避免在
attributeChangedCallback里操作 DOM，应先更新内部状态变量（如this._isChecked = ...），再统一同步到视图
hidden 和 class 是唯一可信赖的视图输出通道
你不能靠 el.hasAttribute('hidden') 判断组件当前是否隐藏，因为初始 HTML 带 hidden、JS 后续设 el.hidden = false，但 attribute 并未移除，读出来仍是 true。真正可靠的是 el.hidden 这个 property 的布尔值。
- 所有视图反馈逻辑应基于
el.hidden或el.classList控制，而不是反复查询 attribute - 更新 class 推荐写法：
el.className = 'status-' + (data?.status || 'down')，强制覆盖，避免残留旧类或多类共存 -
hidden和class是浏览器原生支持、无副作用、可被 CSS 和辅助技术准确识别的输出通道；其他自定义属性（如data-state）仅适合传参，不适合驱动视图
MutationObserver 无法替代状态管理
有人试图用 MutationObserver 监听 data- 变更或 class 切换来“监控状态”，这是无效路径：它只能看到 DOM 结构变化，看不到 property 更新、内部变量变更，也无法区分有意变更与框架自动操作。
-
MutationObserver对input.checked = true这类 property 修改完全静默 - 监听
class变化虽可行，但极易误报（如动画类、第三方库注入的临时类） - 真实深度监控必须从源头出发：在 setter、事件处理、或自定义元素生命周期中主动记录和派发状态变更，而不是反向“猜”DOM 是否变了
最常被忽略的一点：所谓“深度状态”，根本不在 HTML 标签里，而在 JS 对象的引用链、闭包变量、或 Proxy 拦截的赋值行为中——HTML 只是最终的、不可靠的投影面。想监控得准，就得从 JS 层定义清楚什么是“状态”，谁有权改，改了之后怎么通知，而不是指望浏览器自动理解你的意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
