data-*属性需js主动监控，不能自动触发；须用mutationobserver或轮询读取变化，且注意初始值不触发、ssr水合丢失、自定义元素需显式声明监听属性。
data-* 属性不能自动触发监控，必须配合 JS 读取和上报逻辑
HTML 的 data-status、data-loaded 这类属性本身是静态的，不会“活过来”——页面加载完，它们就定格在那里，不变化、不通知、不上报。监控脚本若只靠 document.querySelector("[data-status='error"]) 扫一遍就结束，等于只拍了一张快照，根本不是“监控”。
真正起作用的是 JS 主动轮询或监听 MutationObserver：
- 轮询简单但浪费资源：
setInterval(() => { if (el.dataset.status === "failed") reportError(); }, 2000) - MutationObserver 更精准：监听
el的dataset变化，但注意它**不响应初始 HTML 中的属性值**，只捕获 JS 后续修改 - 关键点：必须在
connectedCallback或DOMContentLoaded后绑定，否则el可能还没挂载
用 data-test-id 做监控标记时，别把它当“状态开关”
data-test-id 是为测试定位设计的，不是状态容器。有人把 data-test-id="payment-status" 和 data-status="pending" 混在一起用，结果监控脚本误判：元素存在 ≠ 状态正确。
实操建议：
- 监控目标应明确区分“存在性”和“状态值”：先查
document.querySelector("[data-test-id='payment-status']")是否存在，再取其dataset.status判断值 - 避免在 SSR 渲染中直接写死
data-test-id值，水合（hydration）后若组件重渲染，该属性可能被 Vue/React 移除——需确保框架保留它或手动补回 - 不要用
data-test-id存数值：data-test-id="counter-5"违反语义，且难维护；应保留data-test-id="counter"+data-value="5"
自定义元素中监听 dataset 变化需手动触发更新
原生 HTML 元素没有 attributeChangedCallback 对 data-* 的响应机制，只有自定义元素（class MyWidget extends HTMLElement）能通过 observedAttributes 声明监听，但注意：
- 必须显式列出要监听的属性名：
static get observedAttributes() { return ["data-step", "data-active"]; }—— 写"data-*"不生效 - 回调里拿到的是原始字符串，
attributeChangedCallback(attr, oldVal, newVal)中的attr是"data-step"，不是"step" - 初始 HTML 中的
data-step="3"会触发一次回调，但dataset.step在构造函数里还拿不到，得等connectedCallback后才稳定 - 若依赖该状态做 DOM 更新，务必检查
newVal !== null，因为移除属性时回调仍会触发，newVal为null
监控上报时机容易错：DOM ready ≠ 数据就绪
常见错误是脚本一加载就执行 reportStatus()，结果取到的 dataset 还是初始值，真实状态还没由后端或 JS 设置好。
判断依据不能只看 DOMContentLoaded：
- 服务端渲染页面：等
window.__INITIAL_DATA__或类似全局变量就位 - 异步加载组件：监听自定义事件，如
window.addEventListener("widget-ready", handler) - 资源加载依赖：用
Promise.all([import("chart.js"), fetch("/api/status")])聚合后再上报 - 最保险做法：加 timeout fallback，比如 5s 后强制上报当前值，并打日志标记“超时未就绪”
没人会盯着控制台看日志，所以超时标记得带上下文：组件名、data 属性路径、当前值——否则排查时只能猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
