HTML模板组件的核心在于JS主动驱动配置注入与响应，template内容只读且不解析指令，需克隆后手动填充和绑定事件，配置应存实例属性并校验防XSS，Shadow DOM中事件须每次渲染后重绑。
高度可配置的 HTML 模板组件，核心不在“模板写得多灵活”，而在「配置如何被安全、可预测地注入并响应变化」——template 标签本身不执行、不解析、不绑定，所有配置能力必须由 JS 主动驱动。
为什么直接在 <template> 里写 {{title}} 或 v-if 会失效
<template> 的 content 是只读的 DocumentFragment，浏览器不会解释其中任何占位符或指令。你看到的 {{title}} 就是纯文本节点，不会被替换；v-if 在原生 HTML 中根本无意义。
- 常见现象：页面空白、控制台无报错、DOM 中保留原始字符串
- 真正生效的是 JS 层的克隆 + 填值逻辑，比如
clone.querySelector('.title').textContent = config.title - 若需动态条件渲染（如显隐区块），必须手动操作
clone.querySelector('.section').style.display = config.showSection ? 'block' : 'none'
attributeChangedCallback 不适合直接处理 JSON 配置
DOM attribute 只能传字符串，无法表达对象、数组或函数。把 config 对象塞进 data-config 属性再 JSON.parse(this.getAttribute('data-config'))，不仅易 XSS，还绕过属性监听机制，且无法响应嵌套变更。
- 正确做法：配置存在实例属性上，如
this.config = { title: '首页', ctaText: '开始' } - 提供明确方法触发更新：
updateConfig(newConfig)，内部调用this.render() -
render()必须清空容器、克隆template.content、填充数据、重新绑定事件、再append - 首次渲染别依赖
connectedCallback异步加载配置，否则可能渲染空内容
配置字段怎么防 XSS 和非法值
用户可控字段（如 config.description、config.avatarUrl）不能直接赋给 innerHTML 或 src，必须做校验和转义。
立即学习“前端免费学习笔记（深入）”；
- 文本类字段统一用
textContent，杜绝 HTML 注入 - URL 类字段（如
img.src）只允许https:、data:、/开头，拒绝javascript:、blob:等危险协议 - 布尔类开关（如
config.enabled）要显式判断=== true，避免"false"字符串被误判为真 - 数字类字段（如
config.timeout）建议用Number(config.timeout) || 0转换，默认兜底
Shadow DOM 下事件绑定为什么不能靠委托
template 克隆后插入 Shadow DOM，其内部节点与外部文档隔离。事件委托（如 document.addEventListener('click', handler)）无法捕获 Shadow 内部冒泡事件，除非显式启用 composed: true，但多数场景不推荐。
- 每次
render()后，必须对克隆节点中的交互元素重新绑定事件：clone.querySelector('button').addEventListener('click', () => this.handleClick()) - 避免在
connectedCallback中一次性绑定，因为后续render()会替换整个 shadow root，旧事件监听器自动失效 - 若需复用逻辑，可封装为私有方法，但绑定动作必须在每次渲染后执行
配置不是越自由越好，而是越语义、越收敛、越可预期越好——value 就该管值，disabled 就该禁用，其余靠事件和方法暴露。所有“动态”都得落在 JS 层的明确时机里，而不是指望模板自己活过来。
