原生 custom element 无数据驱动能力，需手动实现响应逻辑；observedattributes 仅监听 html attribute 而非 js property，且须严格匹配命名、处理 null oldvalue、防重复更新；js 属性变化需 proxy 或 object.defineproperty 拦截；data-* 仅用于初始化，非响应式；render() 应幂等、局部更新、避免副作用。
原生 Custom Element 不自带数据驱动能力，必须手动补足响应逻辑才能让“数据变 → 视图动”真正成立；否则你写的只是带标签的静态模板。
observedAttributes 只监听 HTML attribute，不监听 JS property
如果你改的是 this.count = 5，哪怕 observedAttributes 里写了 'count'，attributeChangedCallback 也完全不会触发——它只响应 el.setAttribute('count', '5') 或 HTML 初始属性解析。
- 必须显式声明
static get observedAttributes()，且数组中字符串要和 HTML 属性名**逐字符一致**（大小写、连字符都不能错） - 首次挂载时已存在的属性会触发一次回调，但
oldValue是null，得用=== null判断，别用!oldValue - 回调里别直接对
newValue做运算，比如Number(newValue) + 1，遇到null就得 NaN - 记得加
if (oldValue === newValue)防重复更新，尤其在框架批量 setAttribute 场景下很常见
JS 属性变化得自己用 Proxy 或 Object.defineProperty 拦截
attributeChangedCallback 管不了 this.title 这种 JS 属性，想让它变就重渲染，就得自己加 setter。
- 推荐在
constructor或connectedCallback中用Object.defineProperty封装关键属性，例如title、loading - setter 里调用
this.render()，而不是直接操作this.innerHTML——后者会清空事件监听器、丢失子组件状态 -
render()应只操作this.shadowRoot，确保样式和事件作用域隔离 - Proxy 更灵活但兼容性略差，若需支持 Safari 14 以下，优先选
Object.defineProperty
data-* 属性不是响应式源头，只是初始化传参通道
data-user-id 这类属性值全是字符串，且浏览器不会因它变化而通知你——它只适合在元素创建时读一次，做初始配置。
- 在
connectedCallback里用this.dataset.userId读取，注意连字符自动转驼峰：data-api-url→this.dataset.apiUrl - 布尔值如
data-disabled="true"必须显式写字符串，不能只写data-disabled，否则this.dataset.disabled是空字符串 - 数值要用
Number(this.dataset.step)转，别信+this.dataset.step，遇到空字符串会变成NaN - 千万别把
data-当状态管理用：多个组件要同步？存 localStorage？走网络？全得靠 JS 变量 + 事件派发，不是往 DOM 上堆 data- 属性
render() 方法必须可控、幂等、无副作用
每次数据变化都调 render()，但它不能每次都暴力重写整个 shadowRoot —— 性能差，还容易丢状态。
- 避免在
render()里反复创建新元素或绑定新事件，优先复用已有节点、用textContent或className更新局部 - 如果用了 innerHTML，确保所有子元素都带唯一
key属性，否则 Shadow DOM 下事件监听器可能失效 - 不要在
render()里发起 fetch 或调用外部 API，这会让更新不可预测；异步逻辑应放在数据 setter 或事件处理中 - 复杂 UI 推荐拆成子自定义元素，各自管自己的
render()，主组件只负责数据分发和生命周期协调
最常被忽略的一点：attributeChangedCallback 和 JS property setter 的触发时机不同、来源不同、类型不同，混用却不做类型校验和变更过滤，是导致视图抖动、重复渲染、NaN 值崩溃的根源。别指望浏览器替你做判断，每个 if 和 Number() 都得亲手写清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
