自定义元素需手动监听属性变化并触发更新，通过 static get observedattributes() 声明小写或 kebab-case 字符串属性，由 attributechangedcallback 响应变更，其参数为字符串类型，首次初始化也会触发；视图更新需直接操作 dom 或调用 render() 方法，避免在回调中修改自身属性以防循环；非字符串属性需自行解析，如布尔值按空字符串或"true"判断，json 用 try-catch 解析，数字用 number() 转换。
自定义元素（Custom Elements）本身不内置 React 那样的状态驱动渲染机制，它依赖开发者手动监听属性变化并触发更新。关键在于利用 static get observedAttributes() 和 attributeChangedCallback 生命周期钩子。
监听指定属性变化
在自定义元素类中，通过静态 getter 声明需要监听的属性名列表：
- 只对 字符串类型的 HTML 属性生效（如
value、disabled、theme），不支持对象或函数等复杂值； - 属性名必须是小写或 kebab-case（如
user-id），不能是 camelCase； - 未在该列表中声明的属性变更，不会触发
attributeChangedCallback。
在 attributeChangedCallback 中响应更新
该回调会在属性被添加、移除、替换或重设时调用，接收属性名、旧值、新值三个参数：
- 旧值和新值始终为字符串（即使 DOM 中写的是
disabled=""，也会传入""）； - 首次初始化时，若属性已存在，也会触发一次回调（旧值为
null）； - 避免在此处直接修改自身属性，否则可能引发无限循环（如在回调里又设置同一属性）。
触发视图更新的常用方式
React 的“重新渲染”对应到自定义元素，本质是同步更新内部 DOM 或触发局部重绘：
- 直接操作
this.shadowRoot或this下的子节点（例如更新文本、切换 class、增删子元素）； - 调用自定义的
render()方法（推荐封装为可复用逻辑）； - 若需异步更新或防抖，可用
requestAnimationFrame或setTimeout延迟执行，避免频繁触发。
处理非字符串属性的技巧
当需要响应对象、布尔或数字等类型时，需自行解析：
- 布尔属性：约定空字符串或
"true"表示 true，其他为 false； - JSON 字符串：在回调中
JSON.parse(newValue)，注意捕获异常； - 数字：用
Number(newValue)或parseInt转换，检查是否为有效数值。
