observedattributes必须显式声明且大小写、连字符等须与html属性名完全一致，仅响应setattribute等attribute操作，不响应property赋值；首次设置时oldvalue为null，需用=== null判断；回调中应避免重复更新和类型转换错误。
observedAttributes 必须显式声明才生效
浏览器不会自动监听你写在 HTML 标签上的任意属性，observedAttributes 是一个静态 getter，必须返回字符串数组，且数组里每个值都要和 HTML 中实际写的属性名**完全一致**（包括大小写、连字符、data-前缀等）。比如你在 HTML 写了 <my-button data-id="123"></my-button>，那就要写 return ['data-id']，写成 ['datasetid'] 或 ['id'] 都不会触发回调。
常见错误现象：
- 属性明明改了，
attributeChangedCallback却一次没调用 - 写了
static get observedAttributes() { return ['label']; }，但 HTML 里写的是<my-button label="xxx"></my-button>（首字母大写），也不触发
attributeChangedCallback 只响应 attribute 操作，不响应 property 赋值
attributeChangedCallback 的触发前提是：属性通过 setAttribute()、removeAttribute()、或 HTML 解析时初始设置——它不关心你是不是直接改了 this.label = 'new' 这种 property。这是 attribute 和 property 的根本区别。
所以如果你在 JS 里这样写：el.label = 'Hello'，哪怕你已声明 label 在 observedAttributes 里，也不会进回调。
使用场景举例：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 从外部框架（如 React/Vue）传 props 到自定义元素时，它们通常走
el.setAttribute('value', xxx)，这时能触发 - 手动用 JS 控制属性变更，必须用
setAttribute，不能直接赋值 - 首次渲染时的初始值，只要是在 HTML 中写的（如
<my-input value="init"></my-input>），也会触发一次，oldValue为null
回调参数顺序固定，oldValue 在首次设置时为 null
attributeChangedCallback(attrName, oldValue, newValue) 的三个参数顺序不能错，尤其 oldValue 在元素初次获得该属性时一定是 null，不是空字符串或 undefined。别用 === undefined 去判断是否首次，要用 === null。
容易踩的坑：
- 把
oldValue当成布尔值判断，比如if (!oldValue)，结果首次设置时误判为“没变化” - 在回调里直接对
newValue做类型转换却忽略null，比如Number(newValue) + 1→NaN - 没做
oldValue === newValue的相等判断，导致重复更新（比如连续两次setAttribute('count', '5')）
不要在 connectedCallback 里初始化属性监听逻辑
connectedCallback 是元素插入 DOM 时调用，但它可能被多次触发（比如移出再插入），而 observedAttributes 和 attributeChangedCallback 是类级声明，只注册一次。把属性初始化逻辑（比如读取初始 getAttribute()、设置默认值）放在 constructor 或 connectedCallback 都可以，但别重复绑定或覆盖已有状态。
更稳妥的做法是：
- 在
constructor里调用this.attachShadow({ mode: 'open' })并初始化内部状态（如this._count = 0） - 在
attributeChangedCallback里只做「响应变更」的事，比如解析新值、触发render() - 避免在
connectedCallback里再调用this.setAttribute()，否则可能引发循环：set → callback → render → set…
真正容易被忽略的是：observedAttributes 声明后，浏览器只监听「attribute 层面」的变化；如果你组件内部靠 property 管理状态，就得自己同步 attribute ↔ property，否则外部无法感知变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
