标签本身不是组件，只是待命的 html 片段，需 js 实例化才能复用；直接 innerhtml 会丢表单状态，应使用 document.importnode(tmpl.content, true)；data-bind 模拟 props 更安全；cdn 必须用 bootstrap.bundle.min.js（含 popper）和完整 https 路径。
<template></template> 标签本身不是组件，它只是个“待命的 HTML 片段”，不渲染、不执行脚本、不加载资源——想让它变成可复用的组件，必须配 JS 实例化逻辑，否则就是一段被浏览器跳过的静态占位符。
为什么直接 innerHTML = template.innerHTML 会丢状态
常见错误是把 <template></template> 当成字符串模板，用 innerHTML 直接写入容器。这会导致：<input checked> 的选中态丢失、<select></select> 的当前选项重置、<textarea></textarea> 的用户输入清空。
- 根本原因是
innerHTML会销毁并重建 DOM 节点，所有原生表单控件状态都被抹除 -
cloneNode(true)也救不了：它复制节点但不保留运行时状态（如input.value），也不触发<script></script>执行 - 正确做法是用
document.importNode(tmpl.content, true)—— 它克隆的是“活”的 DOM 结构，能保留表单值、事件监听器（如果已绑定）、selected属性等
data-bind 是最轻量的“props”模拟方案
纯 HTML + JS 没有 props 概念，所谓传参本质是工厂函数接收数据对象，再映射到 DOM 节点。用 data-bind 属性比 class 名更安全、更易维护。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 写
<span data-bind="title"></span>，而不是<span class="card-title"></span>—— 后者容易被全局 CSS 或其他组件样式污染 - 填充时遍历
fragment.querySelectorAll('[data-bind]')，按属性值找对应字段：node.textContent = data[bindAttr] - 禁止在模板里硬编码 ID（如
id="card-1"），多次实例化会导致重复 ID，破坏document.getElementById和 label 关联
CDN 引入组件库时，bootstrap.bundle.min.js 不可省略
很多交互失效（比如 data-bs-toggle="modal" 点击无反应）不是因为没引入 JS，而是只引了 bootstrap.min.js —— 它不含 Popper，而 Bootstrap 5+ 的 tooltip、dropdown、modal 全部依赖 Popper 做定位。
- 必须用
bootstrap.bundle.min.js（含 Popper），或单独加popper.js+bootstrap.min.js - 图标不显示？大概率漏了
bootstrap-icons或font-awesome的 CDN；一行补全：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"> - 服务端渲染（Gin/Flask/Express）下，CDN 地址必须是完整 HTTPS 链接，写成
./css/bootstrap.css会导致 404 —— 浏览器按当前路由拼路径，不是按文件系统找
真正难的不是怎么克隆模板，而是怎么让多个实例互不干扰：表单控件状态、事件监听、CSS 作用域、ID 冲突——这些都得靠 importNode + data-bind + 绝对 CDN 路径 + 语义化外层包裹来一层层堵住漏洞。漏掉任意一环，复用就变成 bug 发射器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
