标签本身不可配置，仅是静态dom片段仓库，不渲染、不执行脚本、不响应属性变化，必须配合js克隆、数据注入、插槽分发等逻辑才能实现高阶容器组件的可配置能力。
直接用 <template></template> 封装高阶容器组件是可行的，但必须配合 JavaScript 实例化逻辑和明确的配置注入机制，否则只是静态结构，不具备“可配置”能力。
为什么不能只靠 <template></template> 标签就完事
<template></template> 本身不渲染、不执行脚本、不响应属性变化，它只是一个 DOM 片段仓库。你把它写进 HTML 里，浏览器根本不会解析里面的 <slot></slot> 或绑定语法，也不会自动把传入的配置对象映射到占位符上。
- 常见错误现象：
<template id="modal"><div class="modal" data-title="{{title}}">...</div></template>—— 这种双大括号写法在原生 HTML 中毫无意义，不会被替换 - 真正起作用的是后续 JS 的克隆 + 遍历 + 属性赋值逻辑，
<template></template>只是提供一个干净、可复用的 DOM 源头 - 如果组件需要响应式更新（比如 title 改变后 UI 自动刷新），还得额外监听属性或使用 Proxy/observe，
<template></template>本身不提供这个能力
createContainer() 工厂函数怎么写才靠谱
封装高阶容器的核心是工厂函数，它接收配置对象，返回已填充内容并挂载好的 DOM 片段。关键点在于：模板克隆、数据注入、插槽分发、挂载控制。
- 必须用
template.content.cloneNode(true)，而不是innerHTML—— 否则 script 标签会执行两次，事件监听器可能重复绑定 - 推荐用
data-*属性做绑定标记，例如<h2 data-bind="title"></h2>，再遍历节点匹配赋值，比正则替换更安全、可调试 - 对
<slot name="footer"></slot>这类插槽，不要硬编码内容，而是预留接口让调用方传入 DocumentFragment 或 HTMLElement - 返回值建议是包含根元素的 DocumentFragment，由调用方决定插入位置，避免强耦合
document.body
如何支持动态样式与条件渲染
纯 HTML 模板无法处理 v-if 或 {{ visible ? 'block' : 'none' }} 这类逻辑，得靠 JS 控制。最简方案是在工厂函数内部操作 style 或 classList。
- 配置项中加
visible: true、theme: 'dark'等字段，工厂函数读取后调用rootElement.classList.toggle('theme-dark', config.theme === 'dark') - 避免在
<style></style>标签里写 CSS 变量然后靠 JS 修改style.setProperty()—— 兼容性差，且 Shadow DOM 外无法生效 - 条件渲染用
if (config.showCloseButton) { closeButton.remove() }比模板内写逻辑更可控，也方便单元测试 - 如果样式变化频繁，建议把主题类名统一放在根元素上，用 CSS cascade 控制子元素，而不是逐个设置内联 style
真正难的不是把 HTML 包进 <template></template>，而是让每次实例化都干净、独立、可预测。比如多个 createContainer({ title: 'A' }) 调用之间不能互相污染事件监听器或定时器，也不能共享同一个 shadowRoot 或 data 对象引用。这些细节一旦漏掉，组件就会在复杂页面中开始“串味”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
