data-*属性仅限服务端静态注入，ssr中动态拼接会破坏hydration一致性；必须json安全序列化，禁止客户端动态绑定，其变更仅能通过customelements+attributechangedcallback响应。
HTML全局属性不是“加了就行”的装饰品，它们在前端工程化中承担着状态桥接、样式作用域锚点、可访问性契约和构建时介入点四重角色；用错位置或忽略上下文，轻则导致构建产物失效，重则引发微前端样式穿透或SSR hydration不匹配。
data-* 属性只该出现在构建时静态注入的 HTML 中
服务端模板（如 EJS、Nunjucks）或 SSR 框架（Next.js、Nuxt）里动态拼接 data-config 或 data-user-id，会直接破坏 hydration 一致性：客户端 JS 读到的初始值和 DOM 实际值可能类型/结构不一致，React/Vue 的 diff 算法会放弃复用节点，触发整块重渲染。
- 必须确保 SSR 输出的
data-*值是 JSON 安全字符串，且与客户端运行时预期类型一致（例如data-count="42"而非data-count="{{ user.count }}"这种未转义模板变量） - 结构化数据一律走
JSON.stringify()序列化，客户端用JSON.parse(el.getAttribute('data-config') || '{}')+try/catch解包 - 禁止在 Vue/React 组件
render()或template中用v-bind:或:动态绑定data-—— 这类属性不会进入 SSR 输出，只在客户端存在，造成首次渲染空白或闪烁
class 和 hidden 是唯一能被 CSS-in-JS 和 Shadow DOM 同时识别的状态出口
工程化工具链（如 emotion、styled-components、Lit）和 Shadow DOM 都依赖 DOM 属性变更触发样式重计算。class 和 hidden 是少数几个浏览器原生支持“属性改 → 视图同步更新”的全局属性；而 data-*、id、style 都不具备这个能力。
- 状态驱动显隐必须用
el.hidden = true/false，而非el.setAttribute('hidden', '')—— 后者会留下空字符串 attribute，与 boolean property 不同步，CSS-in-JS 的css`[hidden] { display: none }`可能失效 - 多状态 UI（loading/error/success）必须用
el.classList.toggle('state-loading')，避免手动拼className字符串；否则 CSS-in-JS 的自动哈希类名（如css-abc123）无法匹配 - 在 Lit 或 Stencil 中使用
@property({ reflect: true })时，仅当反射目标是class或hidden才真正影响视图；反射data-id只改 attribute，不触发样式或 Shadow DOM 更新
contenteditable + tabindex 是可访问性工程的硬性组合项
任何启用 contenteditable 的组件，若未显式声明 tabindex，即违反 WCAG 2.1 2.1.1（键盘可操作性），且在自动化审计工具（axe-core、Lighthouse）中直接标为严重问题。
-
contenteditable="true"必须搭配tabindex="0"，缺一不可；写成tabindex="-1"会导致键盘无法自然进入，只能靠 JS.focus()强制聚焦，破坏 tab 流顺序 - 禁用拼写检查应写
spellcheck="false"，而非省略 —— Chrome 默认开启，下划线干扰视觉设计，且部分输入法在 spellcheck=true 下行为异常 - 嵌套子元素（如
<span></span>、<strong></strong>）必须确保无user-select: none或pointer-events: none，否则光标无法定位，屏幕阅读器无法正确通告编辑位置
自定义元素中 attributeChangedCallback 是 data-* 唯一合法响应通道
想让 data- 属性变更触发逻辑（比如 data-theme="dark" 切换主题），原生 div 或 span 完全无解；只有通过 customElements.define() 注册的自定义元素，配合 observedAttributes 和 attributeChangedCallback，才能实现真正的响应式监听。
- 必须在
static get observedAttributes()中显式列出要监听的data-名，如['data-theme', 'data-locale']；漏写=不触发回调 - 回调中获取新值要用
newValue参数，而非再调this.dataset.theme—— 后者仍是旧值，因为 dataset 更新发生在回调之后 - 若需兼容非自定义元素场景（如第三方库封装的容器），只能退回到 MutationObserver 监听
attributes，但性能开销大，且无法区分是data-还是其他属性变更
真正卡住工程落地的，从来不是属性本身会不会用，而是它在构建流水线、SSR hydration、CSS 作用域、可访问性审计这四个环节里的行为是否可控——data- 在服务端和客户端的值一致性、hidden 在 Shadow DOM 里的继承规则、contenteditable 在 axe 扫描中的失败阈值，这些才是日常调试里最耗时间的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
