纯HTML组件库能实现，但需强制命名空间、设计令牌和自闭合结构三支柱；放弃“复制即用”幻想，必须依赖约定与手动约束。

直接上结论：纯 HTML + CSS 的组件库能做，但必须放弃“写完就能用”的幻想——它不自动渲染、不响应数据、不隔离样式，所有封装都得靠约定和手动约束。

为什么不能直接复制粘贴 HTML 片段

浏览器不会解析 <include src="header.html">，也不会执行 <nav> 里的逻辑。把一段带 class="card" 的 HTML 复制到十个页面，改一个样式就得全局搜替换，漏一处就崩一处。

• 类名没前缀（如 card）→ 极易和项目其他样式冲突
• 用 px 写间距 → 高 DPR 屏幕模糊，缩放失效
• 没 <button> 标签而用 <div role="button"> → 键盘焦点丢失、表单提交失败、读屏器无法识别
• 结构不自闭合（比如缺 <div class="c-card__footer">）→ 粘贴到新页面后样式错乱或内容错位

必须加命名空间 + 设计令牌 + 自闭合结构

这是三根支柱，缺一不可。

• 所有类名强制带统一前缀，如 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>
    <div class="c-card__footer"><button class="c-button">操作</button></div>
  </div>

静态环境里怎么复用模板

GitHub Pages、Netlify、Vercel 这类托管平台不支持 PHP include 或 EJS，<template id="c-nav"> 不会自动展开，必须靠 JS 驱动。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 推荐方案：用 <template id="c-nav"> 包裹结构，再用 JS 克隆插入：document.getElementById('c-nav').content.cloneNode(true)
• 次选方案：fetch 加载外部 HTML 文件，但要注意 CORS 和缓存问题；路径必须相对且可被静态服务器正确返回
• 绝对避免：document.write()（破坏 DOM 流）、<iframe>（SEO 失效、样式隔离、滚动错位）

要不要上 Web Components

如果需要真正封装、样式隔离、生命周期管理，且目标浏览器支持现代标准（Chrome 63+、Firefox 63+、Safari 12.1+），那 customElements.define() 是唯一原生解法。

立即学习“前端免费学习笔记（深入）”；

• 标签名必须含短横线，如 nav-bar；写成 navbar 会被浏览器忽略
• <template> 里不能有 <script> 或 <style>，它们得通过 JS 注入或用 adoptedStyleSheets
• Shadow DOM 默认 mode="closed" → 外部 JS 无法访问内部节点；调试时建议先设为 open
• 事件监听必须用 this.shadowRoot.addEventListener()，不是 document.addEventListener()

最常被忽略的一点：组件不是“写出来就行”，而是“被别人复制粘贴后仍能正常工作”。这意味着它不能依赖全局 JS 变量、不能硬编码字体大小、不能假设父容器有某个 class —— 所有行为必须收敛在自身作用域内，所有配置必须显式暴露（如 data-theme、data-size）。否则，所谓“轻量级”，只是把复杂性藏得更深了。