原生自定义元素需手动处理属性映射、事件绑定与类型转换：data-* 属性须在 connectedcallback 中读取并配合 observedattributes 和 attributechangedcallback 响应变更，shadow dom 内部事件需显式委托，自定义名称必须含连字符且非原生标签名。
原生自定义元素（Custom Elements）的属性和事件绑定不是自动发生的，必须手动映射、显式监听、类型转换，并配合生命周期钩子；否则 data-* 属性只是静态字符串，attributeChangedCallback 不会响应初始值，事件也不会穿透到 Shadow DOM 内部。
data-* 属性怎么读取才安全
很多人直接在 constructor 里用 this.dataset.userId，结果读到 undefined 或空对象——因为此时 DOM 还没挂载，dataset 虽可读，但不可靠。
- 连字符命名会自动转驼峰：
data-show-avatar→this.dataset.showAvatar，但data-UID不会变成uid，得写成data-uid -
dataset值永远是字符串："true"≠true，"42"≠42，别用if (this.dataset.disabled)判断布尔 - 初始化映射建议放在
connectedCallback中，此时 DOM 已就位，子节点、dataset、getAttribute都可用 - 若需后续响应变更，必须搭配
static get observedAttributes()和attributeChangedCallback，且只监听去掉data-后的属性名（如'user-id'，不是'data-user-id'）
attributeChangedCallback 为什么没触发
写了 observedAttributes 却发现属性改了回调不执行，八成是声明错了名字或漏了关键逻辑。
-
observedAttributes只接受标准 HTML 属性名：小写字母 + 连字符，不能含下划线或大写，比如['user-id', 'disabled']✅，['data-user-id']❌ -
attributeChangedCallback不会为初始渲染时的属性值触发（即从 HTML 解析出来的值），oldValue为null，必须在connectedCallback中手动同步一次 - 回调中
newValue仍是字符串，要转类型：布尔用newValue === 'true'，数字用parseInt(newValue, 10)，JSON 对象加try/catch - 别在回调里直接操作 DOM 渲染——它可能被频繁调用，应节流或合并更新
事件怎么绑定到 Shadow DOM 内部元素
Shadow DOM 天然隔离事件流，外部绑的 onclick 或 addEventListener 默认收不到内部按钮的点击，必须主动委托或暴露接口。
- 不要在宿主元素上直接写
onclick="handle()"—— 它只能捕获宿主自身事件，进不了 shadow 内部 - 在
connectedCallback中对 shadow 内部元素调用addEventListener，例如：this.shadowRoot.querySelector('button').addEventListener('click', this.handleClick.bind(this)) - 若需对外暴露事件，用
this.dispatchEvent(new CustomEvent('submit', { detail: { value } }))，父组件监听@submit即可 - 避免用内联
oncontextmenu或onclick，既难维护又绕过 Shadow 封装边界
为什么 customElements.define 报错 “not a valid custom element name”
注册失败基本就卡在这三个硬性规则上，浏览器不会给你提示细节。
- 名字必须含连字符：
my-button✅，mybutton❌，MyButton❌，my_button❌ - 不能是原生标签名：
div、button、slot、html全部禁止，哪怕加了连字符也不行（如div-element仍非法） - 不能以
x-开头再加连字符（如x-button是合法的，但老式规范曾限制，现代浏览器已放开；语义优先，别图省事用x-） - 注册前确保没重复定义：
customElements.get('my-button')返回undefined才安全
真正麻烦的从来不是语法，而是那些“看起来应该自动生效”的地方——比如以为改了 data-id 就能触发重渲染，或者以为 onclick 能穿进 Shadow DOM。这些隐含假设，恰恰是调试中最耗时间的部分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
