HTML本身不支持基于代理的组件属性映射，该能力由JavaScript的Proxy实现，用于拦截对象读写并同步到DOM或组件状态；HTML仅声明结构，所有响应式逻辑均由JS运行时驱动。
HTML 本身不支持“基于代理的组件属性映射”——这是 JavaScript 的能力，不是 HTML 的语法特性。所谓“代理映射”，本质是用 Proxy 拦截对象读写，再同步到 DOM 元素属性或自定义组件状态上。HTML 只负责声明结构，真正驱动映射的是 JS 层逻辑。
为什么不能直接在 HTML 里写 Proxy 映射
HTML 是静态标记语言，不执行代码，也不理解 Proxy、Reflect 或响应式逻辑。你看到的“HTML 绑定”（比如 Vue 的 v-model 或 React 的 JSX 属性）背后全是 JS 运行时在操作 DOM 和数据。浏览器解析 HTML 时，只会创建元素节点，不会自动建立数据劫持关系。
Proxy + customElements.define 实现属性同步
如果你要让自定义组件（如 <my-input></my-input>）响应式地映射 JS 对象属性，必须手动用 Proxy 拦截，并在 handler 里调用 this.setAttribute() 或更新 shadow DOM 内容。
- 只对组件实例上的
props对象做Proxy，不要代理整个组件实例（会干扰生命周期） - 在
set拦截中触发this.render()或this.updateInputValue()，避免直接操作innerHTML引发 XSS - 注意
attributeChangedCallback和Proxy的双向同步冲突：比如用户输入触发 set → 更新属性 → 触发 attributeChangedCallback → 再次 set，可能造成循环 - 示例片段：
const props = new Proxy({ value: '' }, { set(obj, key, val) { obj[key] = val; if (key === 'value') element.inputEl.value = val; return true; } });
常见错误：把 Proxy 当成 HTML 属性绑定语法
有人试图这样写：<my-component value="[[data.value]]"></my-component>，以为加了双括号就能触发代理。这不会生效——除非你写了对应的模板引擎或框架解析器。原生 HTML 不识别这种语法，也不会自动监听 data 对象变化。
立即学习“前端免费学习笔记（深入）”；
- 浏览器遇到未知属性（如
value="{{x}}"）只是当成字符串存进getAttribute('value')，不会解析、不会订阅 - 若用
Object.defineProperty替代Proxy，在现代环境（尤其涉及数组/嵌套对象）会漏掉变更，Proxy是唯一可靠选择 - 移动端 Safari 对
Proxy支持从 iOS 10.3 起才稳定，旧版本需降级 fallback（比如轮询 +Object.observe已废弃，不推荐）
真正的难点不在怎么写 Proxy，而在于决定哪些属性该映射、何时触发 DOM 更新、以及如何避免重复渲染。这些边界条件比语法本身更消耗调试时间。
