原生 仅是结构容器，不支持插值或指令；所有渲染逻辑必须由 js 实现：克隆 content、填充数据、绑定事件、校验输入，并通过 updateconfig() 和 render() 管理配置与 dom 更新。
HTML <template></template> 本身不支持配置，所谓“可配置”全靠 JS 手动注入数据、绑定事件、校验输入——它只是个结构容器，不是 Vue 或 React 那种响应式模板引擎。
为什么直接在 <template></template> 里写 {{title}} 或 v-if 没用
<template></template> 的 content 是只读的 DocumentFragment，浏览器不会解析其中的占位符或指令。你看到的 {{title}} 就是纯文本，不会自动替换；v-if 在原生 HTML 中根本无效，除非你用 Vue 加载并接管整个节点。
常见错误是把 Mustache 或 Vue 写法直接塞进 <template></template>，结果页面啥也不显示，控制台也没报错，只有一片空白。
- 所有插值、条件、循环逻辑必须由 JS 实现：克隆后查节点、填值、删/显元素、绑定事件
- 不能依赖模板语法做渲染控制，否则组件在无框架环境里直接失效
- 若需服务端预编译（如 EJS），得换用
html-webpack-plugin+ 显式 loader，而非原生<template></template>
createComponent(config) 函数怎么组织才真正可配置
关键不在 HTML，而在 JS 层怎么组织数据流和 DOM 操作。推荐用函数封装渲染逻辑，把配置对象作为唯一参数：
- 配置项统一走
data-*属性或 JS 对象传入，避免硬编码在 HTML 里 - 模板内用语义化 class（如
.card-title、.cta-button）而非随机 ID，方便querySelector精准定位 - 对用户可控字段（如
config.description）始终用textContent赋值，防 XSS；图片src做协议白名单校验（只允许https:、data:、/开头） - 按钮、开关等交互元素，必须在每次克隆后重新绑定事件，不能依赖事件委托——尤其在 Shadow DOM 场景下会失效
自定义元素中更新配置时，render() 必须清空再重挂
自定义元素的 attributeChangedCallback 或 observedAttributes 只监听属性变更，但 JSON 类型的配置对象无法被 DOM attribute 直接表达。所以实际做法是：
- 把配置对象存在实例属性上，比如
this.config = { title: '首页', ctaText: '立即开始' }; - 提供一个公开方法
updateConfig(newConfig)，内部调用this.render() -
render()函数负责：清空容器 → 克隆template.content→ 填充数据 → 绑定事件 →append进去 - 不要在
connectedCallback里做异步加载配置，否则首次渲染可能为空；建议配置就绪后再调用render()
容易忽略的一点：template.content.cloneNode(true) 返回的是文档片段，它没有父节点、没有 ownerDocument，也不能直接监听事件——所有交互行为都得在插入 DOM 后手动绑定，且每次克隆都是全新副本，旧事件监听器不会继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
