HTML中无“同步设置”概念，同步由JavaScript实现；HTML仅通过data-sync-group等属性标识模块边界，配合addEventListener和CustomEvent手动触发更新，并用data-sync-enabled控制开关。
HTML里根本没有“同步设置”这个概念
浏览器环境下的 HTML 本身不处理同步逻辑，它只是静态标记语言。所谓“按模块开关同步项”，实际是 JavaScript 控制的数据同步行为（比如表单字段联动、状态镜像、跨 iframe 通信），HTML 只负责提供结构和触发点。
常见错误现象：localStorage 更新了但页面没反应、input 值变了但关联 div 不更新、多个 checkbox 绑定同一状态却不同步——这些问题根源都在 JS 层缺失响应式监听或手动同步逻辑，不是 HTML 能解决的。
用 data- 属性标记同步模块边界
HTML 的作用是清晰声明哪些元素属于同一同步单元，方便 JS 定位和分组。靠 class 或 id 容易冲突或粒度太粗，data-sync-group 是更可控的方式。
- 给需要联动的元素统一加
data-sync-group="user-profile"，比如input#name、span#preview-name、textarea#bio - 避免用
data-module这类泛化命名，JS 查询时容易误匹配；优先用语义明确的值，如"cart-quantity"而非"module1" - 不要在
data-sync-group里塞 JSON 字符串，既难读又增加解析开销；复杂配置交给 JS 对象，HTML 只做轻量标识
addEventListener + dispatchEvent 实现手动同步触发
没有框架时，最直接可控的同步方式：一个元素变更后，显式通知同组其他元素更新。比轮询或 MutationObserver 更精准，也比双向绑定更易调试。
立即学习“前端免费学习笔记（深入）”；
示例场景：用户修改 input#email，需实时更新 span#email-preview 和校验状态 div#email-error：
document.querySelectorAll('[data-sync-group="user-email"]').forEach(el => {
if (el.matches('input')) {
el.addEventListener('input', () => {
const value = el.value;
// 触发自定义事件，携带数据
el.dispatchEvent(new CustomEvent('sync:update', {
detail: { field: 'email', value }
}));
});
}
});
// 监听同步事件，更新对应元素
document.addEventListener('sync:update', e => {
const group = e.target.closest('[data-sync-group]').dataset.syncGroup;
if (group !== 'user-email') return;
document.querySelectorAll('[data-sync-group="user-email"]').forEach(target => {
if (target.matches('#email-preview')) target.textContent = e.detail.value;
if (target.matches('#email-error')) target.hidden = e.detail.value.includes('@');
});
});
注意：CustomEvent 必须用 detail 传参，不能依赖 event.target 推导上下文；否则跨组操作时容易污染。
同步开关用 data-sync-enabled 控制，别删事件监听器
动态关闭某模块同步，最安全的做法是加属性开关，而不是 removeEventListener。后者容易漏掉、难追踪，且重新绑定成本高。
- 默认启用：所有元素带
data-sync-enabled="true" - 临时禁用：JS 修改为
el.dataset.syncEnabled = "false"，同步逻辑开头加if (el.dataset.syncEnabled !== "true") return; - 兼容性影响：IE11 不支持
dataset，若需支持，改用getAttribute("data-sync-enabled") === "true" - 性能提示：频繁切换开关不会引发重排，但每次事件都需判断属性值，对高频输入（如
input）建议用input节流，而非关同步
真正麻烦的是跨 iframe 或跨 window 同步——postMessage 的序列化限制、目标窗口存活判断、重复监听注册，这些细节比 HTML 标记本身重要得多。
