直接复制HTML片段会出问题，因为静态托管环境不解析模板语法，且易引发类名冲突、高DPR模糊、无障碍缺陷和结构缺失；必须加命名空间、设计令牌和自闭合HTML。
为什么直接复制 HTML 片段会出问题
因为浏览器根本不解析 <include>、<?php include ?> 或 EJS 模板语法——它们在 GitHub Pages、Netlify 这类静态托管环境里就是纯文本。你粘贴一段 <div class="card">，看似能用，但很快会遇到：类名冲突（项目里已有 .card）、px 值在高 DPR 屏幕模糊、<div role="button"> 无法键盘聚焦或表单提交、结构缺 footer 导致样式错位。
必须加命名空间 + 设计令牌 + 自闭合 HTML
这三件事不是“建议”，是避免崩溃的底线：
- 所有类名强制带统一前缀，比如
c-button、c-card__header、c-modal--small；禁用.header、.content这类泛化名 - CSS 变量统一挂载在
:root下：--c-space-md、--c-color-primary、--c-radius；所有padding、margin必须用var(--c-space-md) - 每个组件 HTML 必须能单独复制进任意页面运行，例如：
<div class="c-card"> <div class="c-card__header"><h3>标题</h3></div> <div class="c-card__body"><p>正文内容</p></div> <div class="c-card__footer"><button class="c-button">操作</button></div> </div>
不能套<section>，不能省略任何__footer结构
<template> 怎么安全克隆并填充数据
<template> 不执行脚本、不加载图片、不解析绑定，它只是占位符。想让它变成真实 DOM，得靠 JS 实例化：
- 用
document.importNode(tmpl.content, true)替代cloneNode(true)，前者保留<input checked>状态，后者会丢 - 模板内禁用硬编码
id（如id="card-1"），多次使用会导致 ID 重复 - 绑定点用
data-bind="title"，不用class="title"——语义清晰、不和样式耦合 - 填充时区分处理：
textContent用于文本，innerHTML仅用于可信 HTML（防 XSS） - 挂载用
container.appendChild(fragment)，别用innerHTML = ...覆盖已有结构
Web Components 是不是必须上
如果你需要真正封装、样式隔离、生命周期管理，且目标浏览器支持 Chrome 63+ / Firefox 63+ / Safari 12.1+，那 customElements.define() 是唯一原生解法。但它有硬约束：
立即学习“前端免费学习笔记（深入）”；
- 标签名必须含短横线，如
<nav-bar>；写成<navbar>浏览器直接忽略 -
<template>里不能放<script>或<style>，得通过 JS 注入或adoptedStyleSheets - Shadow DOM 默认隔离
@media prefers-reduced-motion等系统级响应，需显式透传 - SSR 场景下，服务端渲染的
<my-card>在客户端 hydration 前是空白的，必须配合defer加载脚本
没这些需求，就别强上——多数轻量场景，<template> + 约定规范 + 手动 JS 实例化，已经足够稳。
