<template>不能直接当插件用，因为浏览器解析时跳过其内容，不执行脚本、不加载图片、不绑定事件，DOM中不可见；它只是惰性蓝图，需JS工厂函数实例化并手动映射配置，无封装性、无样式隔离、无响应式机制。
为什么不能直接当插件用
因为浏览器解析时会跳过<template>内容，不执行脚本、不加载图片、不绑定事件，DOM 中完全不可见。你把它写进 HTML，页面就真的一片空白——这不是 bug，是规范行为。常见误操作是把它当 Vue 的 <template> 或 Web Component 的 <slot> 用，结果 JS 找不到节点、表单状态丢失、<script> 标签静默失效。
更隐蔽的问题是：innerHTML = template.innerHTML 会清空 <input checked> 的选中态；cloneNode(true) 复制的 <script> 不执行，<style> 不生效；模板里写 {{title}} 这类插值，原生 HTML + JS 完全不识别。
怎么让变成可复用的插件入口
核心是把 <template> 当作“蓝图”，靠 JS 工厂函数实例化，而不是靠浏览器自动渲染。所谓“插件”，本质是调用时传入配置对象，JS 自动映射到 DOM 节点。
- 模板外层不用
id，改用语义化data-name="card"或data-type="modal"，避免多次插入时 ID 冲突 - 绑定点统一用
data-bind="title"、data-bind="content"，比 class 名更可靠、更易批量更新 - 工厂函数返回
DocumentFragment，不是字符串，避免重复 HTML 解析开销 - 首次生成后缓存节点引用，后续只更新
textContent或dataset值，不重新克隆
如何避免插件在多处使用时样式/逻辑冲突
纯 <template> 没有 Shadow DOM 隔离，也没有作用域 CSS，样式泄漏和事件干扰是默认行为。必须靠约定+工具兜底。
立即学习“前端免费学习笔记（深入）”；
- 每个组件外层加唯一类前缀，如
cmp-alert，子元素用cmp-alert__title、cmp-alert__close - 禁止在模板内写
!important，否则父级无法覆盖；所有样式通过类名控制优先级 - 动态内容留空容器 + 注释说明用途，例如
<div class="cmp-tabs__panels"><!-- 插入 tab 面板 --></div> - 若需响应式更新，JS 必须显式监听数据变化并手动 patch，没有自动 diff 或 re-render 机制
和 Web Components 相比，插件方案的硬边界在哪
它不提供封装性、无样式隔离、无属性响应、无生命周期钩子——这些不是“还没实现”，而是设计上就放弃。适合静态内容、低频交互、轻量集成场景，比如 CMS 后台卡片、文档站点侧边栏、邮件模板预览。
一旦需要：监听 disabled 属性变化、CSS 变量注入、connectedCallback 初始化、或与 lit/solid 等库协同，就得切到真正的自定义元素。用 <template> 硬扛，最后只会堆出一堆手动 patch 的胶水代码。
