直接复制html片段会出问题，因为静态托管环境不解析模板语法，且易引发类名冲突、高dpr模糊、无障碍缺陷和结构缺失；必须加命名空间、设计令牌和自闭合html。
为什么直接复制 HTML 片段会出问题
因为浏览器根本不解析 <include></include>、<?php include ?> 或 EJS 模板语法——它们在 GitHub Pages、Netlify 这类静态托管环境里就是纯文本。你粘贴一段 <div class="card">，看似能用，但很快会遇到：类名冲突（项目里已有 <code>.card）、px 值在高 DPR 屏幕模糊、<div role="button"> 无法键盘聚焦或表单提交、结构缺 footer 导致样式错位。
<h3>必须加命名空间 + 设计令牌 + 自闭合 HTML</h3>
<p>这三件事不是“建议”，是避免崩溃的底线：</p>
<ul>
<li>所有类名强制带统一前缀，比如 <code>c-button、c-card__header、c-modal--small；禁用 .header、.content 这类泛化名
:root 下：--c-space-md、--c-color-primary、--c-radius；所有 padding、margin 必须用 var(--c-space-md)
<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></section>，不能省略任何 __footer 结构
<template></template> 怎么安全克隆并填充数据
<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></nav-bar>；写成<navbar></navbar>浏览器直接忽略 -
<template></template>里不能放<script></script>或<style></style>，得通过 JS 注入或adoptedStyleSheets - Shadow DOM 默认隔离
@media prefers-reduced-motion等系统级响应，需显式透传 - SSR 场景下，服务端渲染的
<my-card></my-card>在客户端 hydration 前是空白的，必须配合defer加载脚本
没这些需求，就别强上——多数轻量场景，<template></template> + 约定规范 + 手动 JS 实例化，已经足够稳。
