HTML自定义元素无内置数据绑定，需手动监听attribute变更并更新内部state；observedAttributes仅监听字符串属性，dataset仅为只读映射，响应式应靠私有_state对象驱动render，slot内容不自动响应父state变化。
HTML自定义元素本身不提供内置数据绑定机制，data-* 属性和 dataset 也不是绑定，只是静态数据载体；真要实现“模型变化 → 元素响应”，必须手动监听、更新、触发——这是最容易误解的起点。
自定义元素里怎么存和读初始数据？
用 attributeChangedCallback 响应属性变更，配合 observedAttributes 列表。它只监听 HTML attribute（不是 property），所以传值必须是字符串：
-
observedAttributes必须返回字符串数组，比如return ["name", "price"]，漏写就收不到通知 - HTML 中写
<product-card name="AirPods" price="199">，JS 里拿到的是字符串"199"，不是数字，要转类型得自己parseInt(this.getAttribute("price")) - 如果传 JSON 字符串如
data='{"inStock":true}'，需JSON.parse(this.getAttribute("data"))，别直接用this.dataset.data—— 它会变成{inStock:true}这种驼峰对象，但原始值已丢失结构
为什么 dataset 不能当 reactive model 用？
dataset 是只读映射视图，不是响应式代理。赋值如 this.dataset.name = "New" 不会触发 attributeChangedCallback，也不会写回 DOM：
- 想让外部 JS 修改也能被监听？必须用
this.setAttribute("name", "New")，否则回调不触发 -
dataset适合初始化读取或一次性配置，不适合做状态中枢 - 真正需要响应式更新时，推荐在元素内部维护一个私有
_state对象，把 attribute 变更同步进去，再由它驱动渲染逻辑
template + slot 怎么配合数据更新？
自定义元素内用 <template> 声明结构，靠 innerHTML 或 textContent 手动注入数据，没有框架的 diff：
立即学习“前端免费学习笔记（深入）”；
- 不要在
connectedCallback里一次性写死 HTML；每次数据变，都应调用重绘函数，比如render() - 用
slot时，内容是实时投影的，但 slot 内部的子节点不会自动响应父元素的 state 变化 —— 它们属于宿主文档，不是自定义元素 Shadow DOM 的一部分 - 若需 slot 内容也响应绑定，得在
slotchange事件里手动遍历、监听、替换，或者干脆放弃 slot，改用innerHTML插入带绑定逻辑的模板字符串
真正的难点不在语法，而在生命周期时机：attribute 变更、property 赋值、内部 state 更新、Shadow DOM 渲染、slot 投影，这五件事发生的顺序和依赖关系，稍不注意就会出现“UI没更新”或“更新两次”。别指望浏览器自动串联它们。
