自定义元素需手动实现双向绑定：通过observedattributes声明监听属性，在attributechangedcallback中同步内部状态，再用setattribute将内部变更写回属性，避免循环调用，并提供input/change事件便于框架集成。
自定义元素（Custom Element）本身不内置双向绑定机制，它属于原生 Web Components 标准，没有 Vue 或 React 那样的响应式系统。要实现“属性 ↔ 内部状态”的双向同步，必须手动建立映射关系：监听属性变更触发内部更新，同时在内部状态变化时主动反射回属性。关键在于利用 attributeChangedCallback 和 setAttribute 两个核心能力。
监听外部属性变更并同步内部状态
当自定义元素的 HTML 属性被 JS 修改（如 el.value = 'new'）或 DOM 初始化时设置（如 <my-input value="init"></my-input>），浏览器会自动调用 attributeChangedCallback。你需要在此回调中解析属性值，并更新内部状态（比如 input 元素的 value 或组件私有字段）。
- 必须在
observedAttributes静态 getter 中声明需监听的属性名（如return ['value', 'disabled']） - 属性值始终是字符串，若需布尔/数字等类型，需手动转换（
JSON.parse或Number()） - 首次渲染前，该回调可能尚未触发，需在
connectedCallback中补充读取初始属性值
内部状态变更时同步回属性
当用户操作（如输入、点击）或 JS 主动修改内部状态（如 this._value = 'changed'）后，应调用 this.setAttribute('value', this._value) 将变更“写回”到 HTML 属性。这样外部通过 el.value 或 el.getAttribute('value') 才能获取最新值，形成闭环。
- 避免在
attributeChangedCallback中再次调用setAttribute，否则会引发无限循环 - 建议封装一个
updateValue(newVal)方法，统一处理内部赋值 + 属性同步逻辑 - 对布尔属性（如
disabled），用this.toggleAttribute('disabled', newVal)更语义化
与框架集成时的注意事项
如果自定义元素被 Vue/React 等框架使用，需注意框架的绑定行为：
- Vue 的
v-model对原生元素默认监听input事件并读取.value，但对自定义元素不会自动识别；需显式监听事件并调用setAttribute - React 的
valueprop 是受控的，需确保每次 render 都把 state 同步到元素属性，否则输入将失效 - 推荐为自定义元素添加标准事件（如
change、input），让框架能自然接入
提供一个最小可行示例
以 <my-input></my-input> 为例：
class MyInput extends HTMLElement {
static get observedAttributes() { return ['value']; }
constructor() {
super();
this._input = document.createElement('input');
this.attachShadow({ mode: 'open' }).appendChild(this._input);
}
attributeChangedCallback(name, oldVal, newVal) {
if (name === 'value') {
this._input.value = newVal || '';
}
}
connectedCallback() {
this._input.addEventListener('input', () => {
this.setAttribute('value', this._input.value);
this.dispatchEvent(new Event('input', { bubbles: true }));
});
}
}
customElements.define('my-input', MyInput);
此时：<my-input value="hello"></my-input> 渲染正确；用户输入后，el.getAttribute('value') 实时更新；JS 修改 el.value = 'world' 也会同步到输入框显示——真正实现双向同步。
