纯html组件库能实现，但需强制命名空间、设计令牌和自闭合结构三支柱；放弃“复制即用”幻想，必须依赖约定与手动约束。
为什么不能直接复制粘贴 HTML 片段
浏览器不会解析 <include src="header.html"></include>，也不会执行 <nav></nav> 里的逻辑。把一段带 class="card" 的 HTML 复制到十个页面，改一个样式就得全局搜替换，漏一处就崩一处。
- 类名没前缀（如
card）→ 极易和项目其他样式冲突 - 用
px写间距 → 高 DPR 屏幕模糊，缩放失效 - 没
<button></button>标签而用<div role="button"> → 键盘焦点丢失、表单提交失败、读屏器无法识别 <li>结构不自闭合（比如缺 <code><div class="c-card__footer">）→ 粘贴到新页面后样式错乱或内容错位 <h3>必须加命名空间 + 设计令牌 + 自闭合结构</h3> <p>这是三根支柱，缺一不可。</p> <ul> <li>所有类名强制带统一前缀，如 <code>c-button、c-card__header、c-modal--small；禁用header、content这类泛化名 - CSS 变量统一挂载在
:root下：--c-space-md、--c-color-primary、--c-radius；所有padding、margin、border-radius必须用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 class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div> <div class="c-card__footer"><button class="c-button">操作</button></div> </div>
静态环境里怎么复用模板
GitHub Pages、Netlify、Vercel 这类托管平台不支持 PHP include 或 EJS，<template id="c-nav"></template> 不会自动展开，必须靠 JS 驱动。
- 推荐方案：用
<template id="c-nav"></template>包裹结构，再用 JS 克隆插入：document.getElementById('c-nav').content.cloneNode(true) - 次选方案：fetch 加载外部 HTML 文件，但要注意 CORS 和缓存问题；路径必须相对且可被静态服务器正确返回
- 绝对避免：
document.write()（破坏 DOM 流）、<iframe></iframe>（SEO 失效、样式隔离、滚动错位）
要不要上 Web Components
如果需要真正封装、样式隔离、生命周期管理，且目标浏览器支持现代标准（Chrome 63+、Firefox 63+、Safari 12.1+），那 customElements.define() 是唯一原生解法。
- 标签名必须含短横线，如
nav-bar；写成navbar会被浏览器忽略 -
<template></template>里不能有<script></script>或<style></style>，它们得通过 JS 注入或用adoptedStyleSheets - Shadow DOM 默认
mode="closed"→ 外部 JS 无法访问内部节点；调试时建议先设为open - 事件监听必须用
this.shadowRoot.addEventListener()，不是document.addEventListener()
data-theme、data-size）。否则，所谓“轻量级”，只是把复杂性藏得更深了。
