template标签本身不渲染、不执行、不绑定，仅作离线仓库；必须用template.content.clonenode(true)克隆后手动填值、绑定事件并插入dom，不支持{{title}}等插值语法或v-if等指令。
template 标签本身不支持配置，所有“可配置”能力必须靠 JavaScript 手动注入数据、绑定事件、校验输入——它只是个结构容器，不是 Vue 或 React 那种响应式模板引擎。
为什么不能直接在 template 里写 {{title}} 或 v-if
template.content 是只读的 DocumentFragment，浏览器不会解析其中的占位符或指令。你看到的 {{title}} 就是纯文本，不会自动替换；v-if 在原生 HTML 中根本无效，除非你用 Vue 加载并接管整个节点。常见错误是把 Mustache 或 Vue 写法直接塞进 template，结果页面啥也不显示，控制台也没报错，只有一片空白。
真正起作用的是：你用 JS 拿到克隆后的节点，再手动填值：
const clone = template.content.cloneNode(true);
clone.querySelector('.title').textContent = config.title;
clone.querySelector('img').src = config.avatarUrl || '';
clone.querySelector('button').disabled = !config.enabled;
如何让一个 template 组件接收外部配置
关键不在 HTML，而在 JS 层怎么组织数据流和 DOM 操作。推荐用函数封装渲染逻辑，把配置对象作为唯一参数：
- 配置项统一走
data-*属性或 JS 对象传入，避免硬编码在 HTML 里 - 模板内用语义化 class（如
.card-title、.cta-button）而非随机 ID，方便querySelector精准定位 - 对用户可控字段（如
config.description）始终用textContent赋值，防 XSS；图片src做协议白名单校验（只允许https:、data:、/开头） - 按钮、开关等交互元素，必须在每次克隆后重新绑定事件，不能依赖事件委托——尤其在 Shadow DOM 场景下会失效
template + 自定义元素时，配置更新怎么触发重渲染
自定义元素的 attributeChangedCallback 或 observedAttributes 只监听属性变更，但 JSON 类型的配置对象无法被 DOM attribute 直接表达。所以实际做法是：
- 把配置对象存在实例属性上，比如
this.config = { title: '首页', ctaText: '立即开始' }; - 提供一个公开方法
updateConfig(newConfig)，内部调用this.render() -
render()函数负责清空容器、克隆template.content、填充数据、绑定事件、再 append 进去 - 不要在
connectedCallback里做异步加载配置，否则首次渲染可能为空；建议配置就绪后再调用render()
容易忽略的一点：template.content.cloneNode(true) 返回的是新副本，但原 template 不会被清空，可以反复克隆——这个特性让你能安全地批量生成多个实例，不用担心模板被“用掉”。
导出 HTML 时怎么保留可配置性
如果组件要被第三方嵌入或导出为静态 HTML，必须剥离运行时依赖：
- 移除所有
data-editable、data-config-id等编辑器专用属性 - 把配置值直接写死进 HTML（如
<h2 class="title">{{title}}</h2>→<h2 class="title">欢迎页</h2>），而不是留着占位符 - 禁用所有未声明的 class 名或内联 style；样式必须来自外链 CSS 文件或
<style></style>块，且类名语义化（如banner-section而非div-12345） - 若用了
<slot></slot>，导出时需将插槽内容扁平合并进主结构，否则目标环境无 Web Components 支持就会丢失内容
最麻烦的其实是样式收敛——哪怕结构完美，只要导出的 HTML 里混着 style="margin-left: 16px" 或随机 class，就等于放弃了后续主题切换和响应式适配的能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
