data-*属性是传参管道，命名须全小写加连字符，dataset仅映射已有属性且自动转驼峰，读取应在connectedcallback中，复杂数据和敏感信息禁用。
data-* 属性本身不构成组件，只是传参的“管道”；真正需要关注的是怎么把参数安全、可靠地塞进自定义元素里，并在正确时机读出来。
data-* 属性命名必须全小写 + 连字符分隔
浏览器解析时会强制把属性名转成全小写，data-userId 实际变成 data-userid，JS 里只能用 dataset.userid 访问，不是 dataset.userId。连字符是唯一被 dataset API 自动识别并转驼峰的分隔符。
-
data-user-id→dataset.userId（合法） -
data-api-key→dataset.apiKey（合法） -
data-user_name或data-userId→ 不会出现在dataset中，或只能用getAttribute('data-user_name')手动取 - 属性值永远是字符串，
data-show="false"读出来是"false"，不是布尔false
dataset 只能读已存在的 data-* 属性，首次设置要用 setAttribute
很多人写 el.dataset.newParam = "value" 发现 DOM 里没生成 data-new-param，是因为 dataset 是只对已有属性做映射的“视图”，不是 setter 接口。新属性必须走原生方法。
- 静态写入：直接在 HTML 标签里加，如
<my-card data-theme="dark" data-user-id="99"></my-card> - 动态添加：用
el.setAttribute('data-foo', 'bar')，之后dataset.foo才能读到 - 动态删除：用
delete el.dataset.foo或el.removeAttribute('data-foo') -
dataset.foo = null或undefined会移除该属性，但dataset.foo = 0会存成字符串"0"
在 customElements 中读取 data-* 的最佳时机是 connectedCallback
constructor 里 this.dataset 虽然可访问，但此时 DOM 子树还没解析完，子元素上的 data- 属性可能还没挂载；而 connectedCallback 是元素插入文档后的第一入口，最稳妥。
- 错误做法：
constructor() { this.userId = this.dataset.userId; this.innerHTML = `...`; }—— 子节点未解析，dataset可能为空或不全 - 正确做法：
connectedCallback() { const id = this.dataset.userId; const config = JSON.parse(this.dataset.config || '{}'); /* 后续逻辑 */ } - 如果需要响应属性变更，得配合
static observedAttributes = ['data-user-id', 'data-theme']和attributeChangedCallback
别把复杂数据塞进 data-*，JSON 字符串也得谨慎
data-* 是为轻量标识和简单配置设计的，不是序列化通道。HTML 源码里明文暴露、引号嵌套易出错、解析失败静默、体积膨胀——全是实际踩过的坑。
- 允许：
data-status="pending"、data-row-id="42"、data-config='{"theme":"light"}'（单引号包裹，避免双引号冲突） - 不推荐：
data-payload='{"items":[{"id":1,"name":"a"},{"id":2,"name":"b"}]}'—— 长、难调试、易 XSS（若服务端未转义） - 更安全的做法：用
data-config-id="cfg-123"，再通过 ID 查表或 fetch 获取完整配置 - 敏感字段如 token、手机号、用户邮箱，绝对不能出现在 data-* 中
最容易被忽略的一点：dataset 的键名转换是单向且不可逆的——你写了 data-last-login-time，JS 里只能用 dataset.lastLoginTime，但反过来，dataset.lastLoginTime = "2026-09-21" 确实会生成对应属性，可一旦拼错驼峰（比如写成 dataset.lastlogintime），就完全失效，DOM 上也不会报错，只会静默丢弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
