如何合理避免HTML全局属性冲突-html教程-PHP中文网

data-*属性不能当状态用，只适合存静态、轻量、非敏感的视图层元数据；其值恒为字符串，无响应式能力，修改后不触发更新，仅适用于初始化传参或DOM自身瞬态状态映射。

如何合理避免html全局属性冲突

HTML全局属性本身不会“冲突”，但开发者误用、滥用或忽略其语义与生命周期，会导致行为不可控、样式穿透、焦点错乱、状态不同步等问题——冲突根源不在属性，而在使用方式。

data-* 属性不能当状态用，只适合做选择器前缀或初始化标记

data-* 的值全是字符串，且 dataset 只读取初始 HTML 中的值；后续 JS 修改 el.setAttribute('data-id', 42) 不会触发响应式更新，框架也感知不到。它不是响应式数据源，也不是状态容器。

别把 data-config='{"theme":"dark"}' 直接 JSON.parse()，没 try/catch 会中断初始化
SSR 渲染后客户端又改 data- 值，首屏和 JS 状态就脱节了，但控制台不报错
真要让 data-* 参与状态追踪，得配合 customElements.define 和 attributeChangedCallback，且必须在 static get observedAttributes() 里声明（不含 data- 前缀）

autofocus 只在 HTML 初始解析时生效，异步场景必须手动 focus() 并校验四条件

Vue/React 动态挂载、v-if 渲染、fetch 后插入的元素，哪怕带 autofocus，浏览器也完全无视——这不是 bug，是规范限定。

手动调 input.focus() 前，必须同时满足：input.isConnected、input.offsetParent !== null、input.tabIndex >= 0 且未被 disabled 或 inert 阻断、document.activeElement !== input
iOS Safari 要求 focus() 必须在用户点击/触摸事件的同步上下文中调用，useEffect(() => ref.current?.focus(), []) 在 iOS 上基本无效
推荐包裹一层 requestAnimationFrame(() => input.focus({ preventScroll: true }))，避开渲染未完成或 transition 未结束的时机

contenteditable="true" 不等于协同编辑能力，必须配 MutationObserver + selectionchange

contenteditable 只是打开本地编辑开关，不产生操作日志、不广播变更、不感知他人修改。多人同时编辑同一区域，DOM 会直接覆盖，光标错乱，格式不一致。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

contenteditable="on" 或 contenteditable="1" 是无效值，浏览器按 inherit 处理，可能意外继承父级 false
靠 input 事件监听编辑？漏掉加粗、缩进、拖拽图片、中文输入法上屏——根本不可靠
必须用 MutationObserver 监听 characterData 和 childList，再配合 selectionchange 事件才能拿到精确变更和光标位置
禁用默认粘贴：onpaste="event.preventDefault()"，再用 event.clipboardData.getData('text/plain') 提纯文本

id 和 class 是唯一真正影响渲染与可访问性的全局属性，但 id 冲突后果最隐蔽

document.getElementById 永远只返回第一个匹配节点，其余同名 id 全被忽略，且不报错——这导致逻辑静默失效，排查极难。

Vue/React 列表渲染中写 <div id="item"> 循环 5 次 → <code>getElementById('item') 永远只拿到第一个
SPA 路由切换后旧节点没清理，新内容带已有 id → 获取结果错位，但控制台无提示
绝对不要用 Math.random() 拼 id，推荐有意义前缀 + 业务标识，如 id="account-form-submit"；必须动态生成时用 crypto.randomUUID()
class 最稳定，用 element.classList.toggle('loading') 比直接操作 className 更安全