自定义元素如何处理属性变化时的重新渲染逻辑

自定义元素需手动监听属性变化并触发更新，通过 static get observedAttributes() 声明小写或 kebab-case 字符串属性，由 attributeChangedCallback 响应变更，其参数为字符串类型，首次初始化也会触发；视图更新需直接操作 DOM 或调用 render() 方法，避免在回调中修改自身属性以防循环；非字符串属性需自行解析，如布尔值按空字符串或"true"判断，JSON 用 try-catch 解析，数字用 Number() 转换。

自定义元素（Custom Elements）本身不内置 React 那样的状态驱动渲染机制，它依赖开发者手动监听属性变化并触发更新。关键在于利用 static get observedAttributes() 和 attributeChangedCallback 生命周期钩子。

监听指定属性变化

在自定义元素类中，通过静态 getter 声明需要监听的属性名列表：

1. 只对 字符串类型的 HTML 属性生效（如 value、disabled、theme），不支持对象或函数等复杂值；
2. 属性名必须是小写或 kebab-case（如 user-id），不能是 camelCase；
3. 未在该列表中声明的属性变更，不会触发 attributeChangedCallback。

在 attributeChangedCallback 中响应更新

该回调会在属性被添加、移除、替换或重设时调用，接收属性名、旧值、新值三个参数：

1. 旧值和新值始终为字符串（即使 DOM 中写的是 disabled=""，也会传入 ""）；
2. 首次初始化时，若属性已存在，也会触发一次回调（旧值为 null）；
3. 避免在此处直接修改自身属性，否则可能引发无限循环（如在回调里又设置同一属性）。

触发视图更新的常用方式

React 的“重新渲染”对应到自定义元素，本质是同步更新内部 DOM 或触发局部重绘：

1. 直接操作 this.shadowRoot 或 this 下的子节点（例如更新文本、切换 class、增删子元素）；
2. 调用自定义的 render() 方法（推荐封装为可复用逻辑）；
3. 若需异步更新或防抖，可用 requestAnimationFrame 或 setTimeout 延迟执行，避免频繁触发。

处理非字符串属性的技巧

当需要响应对象、布尔或数字等类型时，需自行解析：

1. 布尔属性：约定空字符串或 "true" 表示 true，其他为 false；
2. JSON 字符串：在回调中 JSON.parse(newValue)，注意捕获异常；
3. 数字：用 Number(newValue) 或 parseInt 转换，检查是否为有效数值。