customElements.define() 仅注册自定义标签，不提供数据绑定；需手动通过 observedAttributes 和 attributeChangedCallback 监听属性变更，并自行处理类型转换与视图更新。
customElements.define() 本身不提供数据绑定，它只注册一个可复用的标签；真正实现绑定，得靠你手动在元素内部读写 dataset、监听属性变更、同步内部状态，并主动触发视图更新。
为什么不能直接用 data-* 实现响应式绑定
data-user-id="1024" 这类属性只是初始化时的一次性字符串传参，后续改它（比如 el.setAttribute('data-user-id', '1025')）不会自动触发任何回调或 UI 更新。你读 el.dataset.userId 拿到的永远是字符串 "1025"，不是数字 1025，也不是布尔值 —— 类型转换必须自己做。
如何在 customElements.define() 中安全映射 data 属性
别在 constructor() 里操作子节点或依赖 dataset 做状态初始化，此时 DOM 还没挂载，this.innerHTML = ... 可能清空已有内容。推荐两个时机：
-
connectedCallback()：适合一次性初始化，比如把this.dataset的值转成内部属性并渲染 UI -
attributeChangedCallback(name, oldValue, newValue)：适合监听后续变更，但必须配合static get observedAttributes()声明要监听的属性名（注意：写'user-id'，不是'data-user-id'）
示例中监听 user-id 和 is-active：
class UserCard extends HTMLElement {
static get observedAttributes() {
return ['user-id', 'is-active'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'user-id') {
this.userId = parseInt(newValue, 10); // 手动转数字
}
if (name === 'is-active') {
this.isActive = newValue === 'true'; // 手动转布尔
this.render(); // 主动刷新 UI
}
}
render() {
this.innerHTML = `
<div class="card ${this.isActive ? 'active' : ''}">
ID: ${this.userId}
</div>
`;
}
}
customElements.define('user-card', UserCard);
常见踩坑点：类型、时机与 DOM 同步
容易忽略的细节：
立即学习“前端免费学习笔记（深入）”；
-
dataset所有值都是字符串，"false"不等于false，"0"不等于0，必须显式转换 - 连字符命名会自动转驼峰：
data-show-avatar→this.dataset.showAvatar，但data-UID不会变成uid，而是uID - 在
connectedCallback()中调用this.render()是安全的；但在constructor()中调用会因子节点未就绪而失败 - 不要混用框架绑定和
dataset：比如 Vue 里写了v-bind:data-id="id"，又在自定义元素里读this.dataset.id，这时你绕过了响应式系统，数据流不可控
什么时候该放弃手写，交给框架处理
如果你需要频繁响应属性变化、嵌套对象监听、计算属性、事件派发或跨组件通信，手写 attributeChangedCallback 很快就会变得脆弱且难维护。这时候 customElements.define() 更适合作为底层封装，上层用 Vue 或 Lit 做真正的响应式绑定 —— 自定义元素只负责“渲染壳”，状态管理交给框架。
