属性代理是让模板响应外部传入属性变化的机制，而非将值硬编码在HTML中；它通过JS动态映射属性到DOM节点，实现数据驱动更新，避免手动重渲染，同时需防范XSS、事件丢失等风险。
什么是属性代理，和直接写死HTML有什么区别
属性代理不是把值硬编码进 <template>，而是让模板能响应外部传入的属性变化。比如你写了一个用户卡片组件，头像、昵称、状态这些字段得从父级动态传进来，而不是在模板里写死 <img src="avatar.jpg">。不代理的话，每次改数据都得手动重渲染整个节点；代理后，只要更新属性，视图自动同步。
关键点在于：模板本身不持有状态，只声明“这里要插什么”，靠 JS 层把属性映射到 DOM 节点上——通常是通过 setAttribute、textContent 或 innerHTML 实现，但必须避开重复绑定、事件丢失、XSS 等坑。
用 template + content.cloneNode(true) 做基础代理
浏览器原生 <template> 是惰性的，不会执行脚本、不触发资源加载，适合做模板容器。但直接 innerHTML 插入会丢失绑定逻辑，所以得靠克隆 + 遍历节点来注入属性。
- 先用
document.querySelector('template').content.cloneNode(true)拿到干净副本 - 遍历所有带
data-bind属性的元素，比如<span data-bind="nickname"></span>，再用el.textContent = this.nickname赋值 - 对
input或textarea要额外处理value，不能只用textContent - 避免对
style或class直接赋字符串——用el.className = ...或el.style.color = ...更安全
customElements.define 里怎么安全做属性映射
如果封装成自定义元素（比如 <user-card>），生命周期里做代理更可控。重点是别在 connectedCallback 里一次性写死，而要在 attributeChangedCallback 中响应变化。
立即学习“前端免费学习笔记（深入）”；
- 必须在
observedAttributes静态 getter 中声明要监听的属性，如return ['nickname', 'avatar'] - 在
attributeChangedCallback(attrName, oldVal, newVal)里判断newVal !== oldVal再更新对应 DOM，防止无效重绘 - 对布尔属性（如
disabled）注意：getAttribute('disabled')返回""或null，要用hasAttribute判断 - 数值属性别直接拼字符串，用
Number(newVal)或parseInt(newVal, 10)转换，避免"2" + 1 === "21"
为什么 innerHTML = template.innerHTML.replace(...) 很危险
字符串替换看着快，但绕过了 DOM 解析流程，极易引入 XSS 和结构错乱。比如用户昵称含 <script>alert(1)</script>，直接插进去就执行了；或者 nickname = "a<b" 会导致标签提前闭合。
- 永远不要用
innerHTML注入未过滤的变量，尤其来自dataset、URL 参数或表单输入 - 若真要插 HTML 片段（如富文本简介），必须用
DOMPurify.sanitize()过滤后再设innerHTML -
replace()不识别属性位置，可能把data-bind="name"里的name也替换了，导致绑定失效 - 模板里如果有
<slot>或条件注释，字符串替换会破坏其语义
复杂点不在语法，而在边界：属性类型混杂（布尔/数字/对象）、异步更新时机、是否需要双向绑定——这些决定了你得选原生代理、轻量库（如 Lit 的 @property），还是干脆交给框架处理。
