直接复制粘贴html区块会出问题，因纯html无作用域、变量或条件渲染能力，易致样式泄漏、js上下文断裂、seo失效；而+customelements.define()是唯一零构建工具、零后端依赖的原生复用方案，但须满足：标签名含短横线、内禁写/、shadow dom需设mode="open"、事件监听须用this.shadowroot.addeventlistener()。
为什么直接复制粘贴 HTML 区块会出问题
因为纯 HTML 没有作用域、变量或条件渲染能力，document.write() 或硬编码 <div class="header">...</div> 会导致样式泄漏、JS 上下文断裂、SEO 失效。常见现象包括：改一个页眉，九个页面漏改；用 <iframe src="header.html"></iframe> 加载后无法继承父级 CSS、滚动错位、无法获取焦点。
用 <template></template> + customElements.define() 实现真正复用
这是目前唯一无需构建工具、零后端依赖的原生方案，但必须满足三个硬性条件：
- 自定义标签名必须含短横线，如
nav-bar，否则浏览器拒绝注册 -
<template></template>内不能写<style></style>或<script></script>，需通过 JS 注入或adoptedStyleSheets关联 - Shadow DOM 默认
mode="closed"，外部样式进不去，要继承全局样式得显式设为mode="open" - 事件监听必须用
this.shadowRoot.addEventListener()，而非document.addEventListener()
示例片段（可直接运行）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<template id="tmpl-header"><header style="background:#333;color:white;padding:1rem;"><h1><slot name="title">My App</slot></h1>
</header></template><script>
class NavBar extends HTMLElement {
constructor() {
super();
const tmpl = document.getElementById('tmpl-header');
this.attachShadow({ mode: 'open' }).appendChild(tmpl.content.cloneNode(true));
}
}
customElements.define('nav-bar', NavBar);
</script>
不写 JS 时怎么让 HTML 区块“接近组件化”
静态页面也能靠约定逼近复用目标，关键在隔离与契约：
- 外层加唯一类前缀，如
cmp-banner，子元素用 BEM 风格：cmp-banner__title、cmp-banner__content - 用
data-属性传递配置，如data-theme="dark"、data-closable="true"，JS 后续可读取响应 - 动态内容留空容器 + 注释说明，如
<div class="cmp-list__items"><!-- 插入列表项 --></div> - 语义化标签当边界：
<header></header>、<nav></nav>、<main></main>不是装饰，它们自带默认 display 和无障碍角色，比一堆<div class="card"> 更接近组件本质<h3>容易被忽略的兼容性与维护陷阱</h3> <p>Web Components 在现代浏览器稳定支持，但 IE 完全不认；而纯 HTML 约定方案看似简单，实际更依赖团队纪律。最容易被跳过的点是：<code>data-属性没文档说明、BEM 子类名在不同页面不一致、<section></section>被滥用作布局容器、<article></article>套了无标题的卡片。这些不会报错，但会让“复用”变成“复制粘贴再微调”，失去约束意义。
