html模板本身不是组件，但可通过约定（如语义标签、data-*属性、bem命名、template标签）支撑组件化落地，配合简单js封装实现可复用雏形。
HTML模板不是组件，但能支撑组件化落地
纯HTML没有import、props或作用域隔离机制，所谓“模板支撑组件化”，本质是用约定代替运行时能力。它不自动复用，但能降低手写重复结构的出错率——前提是模板本身按组件逻辑设计，而非堆砌
。用
常见错误现象：<div class="card"></div>里硬编码标题和按钮文字，复制到新页面就得全局搜索替换；或者把<nav></nav>整个写死成5个链接，后续加菜单项只能改HTML源码。
- 语义标签即天然边界：
<header></header>、<article></article>、<aside></aside>自带结构含义和默认渲染行为，比<div class="cmp-header"></div>更轻量、更可靠 - 模板文件必须预留注入点：用
data-*属性（如data-title、data-closable）传递配置，JS读取后动态填充，而非靠字符串替换 - 禁止在模板里写内联样式或
!important——否则子组件无法被父级CSS覆盖，破坏样式隔离
用<template></template>标签写静态模板，比<script type="text/template">更安全</script>
<template></template>是HTML5原生标签，浏览器不会解析其内容，也不会触发图片加载或脚本执行，适合存结构片段。相比把模板塞进<script type="text/html"></script>，它无需额外解析、无XSS风险、支持语法高亮。
使用场景中要注意：
- 必须用
document.importNode()或content.cloneNode(true)提取内容，直接innerHTML读取会丢失<template></template>内部结构 - 不能直接在
<template></template>里写<style></style>或<script></script>——它们不会生效，也不该存在；样式应由外部CSS控制 - 若需预编译（如用Handlebars），仍建议把原始模板放在
<template></template>里，再由引擎读取并编译，而非拼接字符串
静态模板 + 简单JS封装 = 可复用组件雏形
没有框架也能做组件，关键在三点：外层唯一类名、子元素BEM命名、数据驱动渲染。一个cmp-banner组件，应该能接受{ title: 'Hello', theme: 'dark' }并生成对应DOM，而不是固定写死。
实操建议：
- 每个模板外层加统一前缀，如
class="cmp-card"，内部用cmp-card__title、cmp-card__footer，避免样式泄漏 - 留空容器+注释说明用途，例如
<div class="cmp-list__items"><!-- 插入列表项 --></div>，方便其他开发者理解插入点 - 封装渲染函数时，优先用
Element.insertAdjacentHTML('beforeend', html)而非innerHTML = html，避免清空已有事件监听器
模板路径管理容易被忽略，但直接影响可维护性
很多人把所有模板都扔进/templates/一级目录，结果随着页面增多，header.html、banner.html、user-card.html混在一起，改一个要翻半天。真正的组件化模板，路径即契约。
推荐结构：
-
/templates/card/下放card.html、card.css、card.js，三者同名同目录 - 公共模板（如面包屑、分页）放
/templates/shared/，业务模板（如product-card）放/templates/product/ - 路径中禁用空格和大写字母，全部小写+短横线，如
/templates/faq-accordion/，避免Windows/macOS大小写敏感问题
复杂点不在语法，而在每次复制模板时是否检查了data属性是否对齐、CSS类名是否带前缀、路径是否与引用处一致——这些细节漏掉一个，复用就变成复制粘贴陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
