data-*属性仅作静态标记，非自动触发器；js需主动监听、解析dataset、批量操作目标元素，并同步aria属性以保障可访问性。
data-* 属性不是触发器，只是标记位
HTML 本身没有“条件触发器”这个概念。所谓“复杂条件触发”，本质是用 data- 属性做轻量标记，再靠 JS 主动监听、判断、响应。比如 data-trigger="user-type" 不会自动生效，它只是告诉 JS：“这个元素的点击，要按 user-type 的值去筛选目标”。
常见错误是把 data- 当成开关，写完就以为逻辑跑起来了。实际上 JS 必须显式执行：querySelectorAll('[data-trigger]') 找到所有触发源，再用 querySelectorAll('[data-target][data-value="' + value + '"]') 批量操作目标。
- HTML 中
data-api-url对应 JS 的el.dataset.apiUrl（自动转驼峰） - 含数字开头的属性如
data-2fa-enabled，必须用getAttribute("data-2fa-enabled")，dataset无法读取 -
data-value值永远是字符串，el.dataset.value === "true"才是布尔真，不能直接当if (el.dataset.value)用
事件委托比逐个绑定更可靠
如果页面会动态增删触发元素（比如表格行、卡片列表），不要对每个元素单独 addEventListener。否则新插入的节点没绑定，旧节点删了还可能漏解绑导致内存泄漏。
正确做法是委托到父容器或 document，再用 event.target.matches('[data-trigger]') 判断来源：
document.addEventListener('click', event => {
const trigger = event.target.closest('[data-trigger]');
if (!trigger) return;
const value = trigger.dataset.triggerValue || trigger.dataset.value;
const targets = document.querySelectorAll(`[data-target="${trigger.dataset.trigger}"][data-value="${value}"]`);
targets.forEach(el => el.classList.toggle('active'));
});
注意：closest() 比 matches() 更安全，能向上找祖先，避免误判子元素。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
aria-controls + aria-expanded 是语义化联动的硬性要求
折叠面板、下拉菜单这类“一个控件控制另一块区域显隐”的场景，光靠 JS 切 class 或 display 不够。辅助技术（屏幕阅读器）需要明确知道“谁控制谁”“当前状态是什么”。
aria-controls 的值必须是被控元素的 id 字符串，不能是 class 名；aria-expanded 只接受 "true" 或 "false" 字符串——写成 ""、"1" 或布尔值都会失效。
- JS 更新状态时，必须同步设置：
trigger.setAttribute('aria-expanded', 'true')和target.setAttribute('id', 'panel-1') - 被控元素如果没
id，或者 JS 动态删改过id，aria-controls就断链，辅助技术完全感知不到 - 不要在
shadowRoot内部直接写color: var(--primary-color)—— CSS 变量不穿透 Shadow DOM，得用getComputedStyle(this).getPropertyValue('--primary-color')主动拿
form.reset() 不重置动态字段，也不触发 change 事件
表单重置不是清空，而是回退到初始 HTML 的 defaultValue/defaultChecked 状态。JS 动态赋的 input.value = "xxx" 如果没同步更新 input.defaultValue = "xxx"，form.reset() 会把值设回原始 HTML 值（常为空）。
更关键的是：动态添加的字段、第三方富文本编辑器、contenteditable 区域，form.reset() 完全不处理它们。想重置，必须手动清理：
- 监听
reset事件（不是按钮的click），用e.preventDefault()拦截，再执行自定义清理逻辑 -
<input type="reset">必须是<form></form>的**直接子元素**，嵌套在<div> 里部分浏览器会忽略<li>重置后不会触发 <code>input或change事件，如有校验依赖这些事件，需手动dispatchEvent
真正复杂的条件触发，从来不在 HTML 层面“自动发生”，而是在 JS 层面对标记、状态、DOM 关系和可访问性语义做精确协同——漏掉任意一环，都可能在特定设备、特定交互路径或特定数据状态下失效。
