<template> 仅是占位符，必须用 document.importNode(tmpl.content, true) 克隆以保留状态，禁用 innerHTML；需结合 Shadow DOM 隔离样式、localStorage+storage 事件同步状态、JS 模块化跨域加载。
用 <template> + document.importNode() 安全复用 UI 片段
直接复制粘贴 HTML 或用 innerHTML 插入模板会丢状态、触发 XSS、破坏事件绑定——<template> 本身只是占位符，真正起作用的是克隆方式。
常见错误现象：
– 表单里 <input type="checkbox" checked> 被插入后变成未勾选
– <select> 的当前选项丢失
– 模板里的 <script> 根本不执行
- 必须从
tmpl.content克隆，不能用tmpl.innerHTML—— 后者是字符串，会抹掉所有原生控件状态 - 用
document.importNode(tmpl.content, true)，它保留checked、value、selected等 DOM 属性值 - 插入后手动遍历
fragment.querySelectorAll('[data-bind]')填充数据，别用正则替换{{xxx}} - 挂载时用
container.appendChild(fragment)，禁用innerHTML +=—— 否则已绑定的事件监听器会被销毁
跨页面共享组件必须解决样式隔离问题
把同一份 <template> 插到多个页面，结果被主站 CSS 意外覆盖（比如 .btn 被全局规则改了边距），这不是模板的问题，是作用域没建好。
常见错误现象：
– 子页面按钮颜色被主应用的 .btn { background: red } 覆盖
– 多个页面共用 id="modal"，document.getElementById('modal') 返回错节点
– 模板内 <style> 在 light DOM 里，照样被外部 CSS 穿透
立即学习“前端免费学习笔记（深入）”；
- 模板内禁止硬编码
id，改用data-id或动态生成唯一标识，如data-id="${Date.now()}-${Math.random().toString(36).substr(2,9)}" - 想真正隔离？必须配合
attachShadow({ mode: 'closed' })，再把克隆后的 fragment 插入shadowRoot - Shadow DOM 下，外部 CSS 无法穿透，
document.querySelector也查不到内部元素，天然隔离 - 所有样式需显式注入 shadowRoot，不能靠
<link rel="stylesheet">自动加载
多页间同步状态得靠 localStorage + storage 事件
HTML 属性（checked、value）只反映加载时快照，不会自动广播变化。你在一个页面勾了暗色模式开关，另一个页面不会变——除非你让它“听见”。
常见错误现象：
– page1 切换主题，page2 刷新后才生效
– 表单填一半关掉，新开页仍是空的
– 多个标签页操作同一组 checkbox，只有当前页响应
-
data-sync是映射键名的桥梁，不是同步机制本身；真正同步靠localStorage.setItem()写入 +window.addEventListener('storage', ...)响应 - 初始化时遍历所有
[data-sync]元素，用localStorage.getItem(key)回填属性值 - 监听
input或blur事件写入 localStorage，避免频繁触发（比如防抖处理） - 注意：storage 事件只在其他页面触发，当前页修改 localStorage 不会触发自己的 storage 事件
跨域或不同站点间共享组件只能走 JS 模块化加载
同源限制下，localStorage、postMessage、BroadcastChannel 全部失效；<iframe> 有通信成本且样式难控制；此时唯一可行路径是把组件封装成可远程加载的 JS 模块。
常见错误现象：
– 试图用 fetch() 读取另一域名的 HTML 文件，被 CORS 拦截
– 用 <script src="https://site-b.com/button.js"> 加载，但脚本里直接 document.write 破坏页面结构
– 组件样式污染主站，或主站样式反向污染组件
- 组件 JS 必须返回一个纯函数，如
renderButton({ text: '提交', onClick: handler })，不依赖全局 DOM 状态 - 样式用 CSS-in-JS 或动态
<style>注入，并加哈希类名避免冲突（如.btn_abc123） - 使用
customElements.define()注册自定义元素，让调用方只需写<my-button text="提交"></my-button> - 确保模块支持 ES Module 导入，兼容现代打包工具和原生
type="module"脚本
<template> 本身不提供任何运行时能力，它只是语法糖；所有“模块化”效果都来自你后续怎么克隆、怎么挂载、怎么通信——漏掉其中一环，就退回到手写重复 HTML 的原始状态。** 
