data-* 属性是静态字符串容器，不响应变化，需通过 setattribute 触发回调，dataset 访问需遵循命名规范且类型需手动转换，仅适合初始化参数注入。

data-* 属性不会自动响应变化

浏览器根本不管 data-* 属性改没改——哪怕你写了 data-theme="dark"，之后用 el.dataset.theme = "light" 或直接改 HTML 字符串，attributeChangedCallback 也完全不会触发。这不是 bug，是设计如此：data-* 只是静态字符串容器，不是响应式通道。

要让它“动起来”，必须同时满足三个硬性条件：

• observedAttributes 静态 getter 中明确列出小写连字符格式的完整属性名，比如 ['data-theme', 'data-user-id']，不能写 'data-*' 通配
• 修改必须走 DOM API：el.setAttribute('data-theme', 'light') 才进回调；el.dataset.theme = 'light' 完全无效
• 回调里拿到的 newValue 永远是字符串，哪怕你塞的是 {"id":456}，也得自己 JSON.parse(newValue)，否则直接当对象用会报 Cannot read property 'id' of undefined

dataset 访问命名和类型全是陷阱

dataset 看着方便，但名字和类型全是坑：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• HTML 里写 data-api-url="/v2"，JS 里必须用 el.dataset.apiUrl 访问——el.dataset.api-url 或 el.dataset.APIUrl 都返回 undefined
• el.dataset.active 拿到的是字符串 "true"，不是布尔值，if (el.dataset.active) 对 "false" 也成立；正确写法是 el.dataset.active === "true"
• el.dataset.count 是 "42"，不是数字 42，别用 parseInt(el.dataset.count)——万一值是 "42px" 就截成 42；稳妥写法是 +el.dataset.count 或 Number(el.dataset.count)

data-* 只适合初始化参数注入

data-* 本质就是字符串容器，只适合单页内、组件挂载前的参数注入，不是通用数据通道：

• 挂载位置优先选 或 ，这样 document.documentElement.dataset 一上来就能读，不依赖 DOM 就绪
• 不要把全局配置塞进某个 <div id="app"> 里——组件还没挂载时就读不到，或者多个组件重复定义 <code>data-api-base 导致冲突
• 绝不能指望 data-* 跨页面：刷新后全丢，新开标签页也拿不到；想传对象，用 sessionStorage；想传简单参数，拼 URL 查询字符串

真正容易被忽略的是隐式解析不存在

没人帮你做类型转换，没人帮你监听变更，没人帮你跨组件同步。data-* 就是一堆字符串，仅此而已。你写的每一条解析逻辑、每一次 setAttribute、每一处 JSON.parse，都得亲手写清楚。漏掉任意一环，就会出现值没更新、类型错乱、回调不触发这类“明明改了却没反应”的问题。