data-sync属性+localstorage是最轻量的共享状态方案，通过约定键名标记、localstorage存储及storage事件监听实现跨页状态同步，需手动读写dom属性对齐状态。
data-sync 属性 + localStorage 是最轻量的共享状态方案
HTML 原生属性本身不跨页面、不持久、不广播，data-sync 只是约定键名的“标记”，真正起作用的是 localStorage 存储 + storage 事件监听。你不能靠 checked 或 value 属性自动同步，必须手动读写 DOM 属性来对齐状态。
常见错误现象：
- 页面 A 切换开关后，新开的页面 B 仍是默认状态
- 表单填到一半刷新，再打开另一个同路径页面，输入框为空
- 多个标签页勾选同一复选框，只有当前页 DOM 更新，其余无反应
实操建议：
- 给需要同步的元素加
data-sync="form-username"，值为localStorage的 key 名 - 每个页面加载时执行初始化：遍历
[data-sync]，用localStorage.getItem(key)读值，再写入对应元素的checked、value等 property - 监听
input或blur事件，触发localStorage.setItem(key, el.value || el.checked) - 监听
window.addEventListener('storage', ...)，在其他页修改时更新当前页 DOM（注意：该事件不触发当前页自身变更）
自定义元素中 attributeChangedCallback 必须配合 observedAttributes
直接改 dataset.mode = 'dark' 或 setAttribute('data-mode', 'light') 不会触发任何回调——浏览器原生元素对 data- 变更完全无感。只有自定义元素显式声明 static observedAttributes = ['mode']，才能捕获属性变化。
实操要点：
-
observedAttributes数组里只写属性名（不含data-前缀），如['theme', 'disabled'] -
attributeChangedCallback中的oldValue和newValue都是字符串，需手动转换：const isDark = newValue === 'true' - 状态同步必须操作 property：
this.#input.checked = isDark，而不是setAttribute('checked', '') - 初始化应在
connectedCallback中做：this.#input.checked = this.hasAttribute('checked')，之后只信任 JS property
hidden 和 class 是唯一能可靠驱动视图更新的全局属性
hidden 和 class 是少数几个属性变更后浏览器会立即重绘的 HTML 全局属性。它们不是数据容器，但作为“状态输出通道”极其稳定；而 data-、id、title 等属性变更不会触发重绘或行为响应。
为什么不用 data-status 控制 UI？
-
data-status="loading"改了，CSS 不会自动匹配[data-status="loading"]规则——除非你手动触发 class 切换 -
el.dataset.status = 'error'后，el.hasAttribute('data-status')仍返回true，但视图毫无变化
实操建议：
- 显隐控制统一走
el.hidden = true/false，别碰setAttribute('hidden', '')—— property 和 attribute 容易不同步 - 多状态 UI（如 loading / success / error）用
el.classList.toggle('state-loading')，配合 CSS 的.state-loading .spinner规则 - 避免用
tabindex或lang承载业务逻辑——它们只影响焦点流或辅助技术，不触发渲染
模板克隆必须用 document.importNode，不能 cloneNode 或 innerHTML
<template></template> 标签只是静态占位符，不执行脚本、不保留状态、不隔离样式。直接 innerHTML = tmpl.innerHTML 插入，会导致 <input checked> 丢失选中态、<select></select> 丢失当前选项、<textarea></textarea> 丢失用户输入内容。
实操关键点：
- 必须从
tmpl.content克隆：const frag = document.importNode(tmpl.content, true) -
importNode能保留原生控件状态，且兼容 Shadow DOM 挂载场景；cloneNode(true)会丢掉所有交互态 - 挂载前遍历
frag.querySelectorAll('[data-bind]')手动填充，禁用正则替换{{title}}—— 易 XSS 且无法处理属性绑定 - 挂载时用
container.appendChild(frag)，禁用innerHTML +=—— 否则已注册的事件监听器会被销毁 - 想真正隔离？必须搭配
this.attachShadow({ mode: 'closed' })，否则所有 class/id 仍暴露在 light DOM 中
localStorage 和 storage 事件都会失效，此时必须退回到后端 session 或 URL 参数 + 服务端存储。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
