html属性不参与依赖注入匹配，仅作静态容器；data-*属性是唯一安全承载依赖标识的机制，需配合js状态检查实现动态依赖控制。
HTML 属性本身不参与依赖注入逻辑匹配——它只是静态容器，真正的“注入”和“匹配”必须由 JavaScript 控制。
data-* 属性是唯一能安全承载依赖关系标识的 HTML 机制
你不能靠 class 或 id 表达依赖关系，因为它们语义上不表示“前置条件”，也不便于程序化读取。只有 data-prereq、data-depends-on 这类自定义属性，才能在不破坏 HTML 合法性前提下，把结构信息可靠地传给 JS。
-
data-prereq="task-1,task-3"是常见写法，值用逗号分隔，JS 可.split(',')解析 - 避免嵌套结构如
data-prereq='["task-1","task-3"]'—— JSON 字符串需JSON.parse()，易因引号转义出错 - 不要用
data-prereq="task-1 task-3"（空格分隔），容易和 class 值混淆，且.split(' ')对多余空格敏感
属性值匹配必须配合 JS 状态检查，不能只靠 CSS 选择器
CSS 属性选择器如 [data-prereq~="task-1"] 或 [data-prereq*="task-1"] 看似能“选中”，但它只做静态匹配，无法判断 task-1 是否真的已完成。真正生效的判断永远在 JS 里。
- 错误做法：
button[data-prereq~="task-1"]:disabled { opacity: 0.5; }—— disabled 是写死的，状态没联动 - 正确路径：监听
task-1元素的data-status="done"变更 → 触发函数遍历所有[data-prereq]元素 → 检查其依赖项是否全部满足 → 再设置disabled或 class - 注意大小写：
data-status="DONE"不会被el.getAttribute('data-status') === 'done'匹配，建议统一小写存储
customElements 中的属性变更必须显式声明并响应
如果你把带依赖的任务封装成自定义元素（如 <task-node></task-node>），光写 data-prereq="task-a" 是无效的——Shadow DOM 不会自动感知该属性变化，也不会触发重渲染。
- 必须在类中声明
static get observedAttributes() { return ['data-prereq']; } - 在
attributeChangedCallback(attr, oldVal, newVal)里重新解析依赖、调用状态检查函数 - 不要在
constructor或connectedCallback里一次性读取data-prereq就完事，那之后属性改了不会更新 - 若依赖项是动态生成的（比如从 API 加载），得额外监听外部状态事件，不能只守着 attribute 变更
最容易被忽略的是：HTML 属性只负责“声明意图”，而所有依赖是否成立、何时解锁、如何提示用户，都得靠 JS 维护一个集中状态对象，并确保每次变更都同步到对应 DOM 节点的 disabled、aria-disabled、data-status 等属性上——漏掉任一环节，键盘用户或屏幕阅读器就收不到正确反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
