html组件化需用data-component标识作用域、template包裹片段、构建工具加载html；禁用id锚点和内联样式/事件；模块根元素加data-module与data-version实现可追溯约束。
HTML组件化本身不自动带来可维护性，关键在于结构、表现、逻辑三者是否真正分离——混在一起的“组件”只是换了个名字的意大利面条代码。
为什么class="header"不如data-component="header"
类名本质是给CSS用的，容易被覆盖、重命名或误删；而data-属性专为JS标记作用域设计，稳定且语义明确。
- 同一页面多次渲染同个模块时，
id="header"会重复，document.getElementById()只返回第一个，逻辑就断了 -
class="header"可能被全局CSS规则意外影响（比如.header img { opacity: 0.8 }），而data-component完全免疫样式干扰 - 构建流程中可用
data-version="2.1"配合CI校验，防止模板和JS逻辑版本错配
import './header.html'在浏览器里直接报错的原因
浏览器原生import只认JS模块，import HTML文件会抛出TypeError: Failed to resolve module specifier。
- Vite用户得加
?raw后缀：import headerHtml from './header.html?raw' - Webpack需配置
raw-loader或html-loader，否则打包失败 - 运行时用
fetch('./header.html')可行，但返回的HTML字符串里：<script></script>不会执行、<img src="logo.png">路径默认相对当前HTML，不是片段所在目录，容易404
用<template></template>包裹片段比display:none更干净
<template></template>不参与DOM渲染、不触发样式计算、不加载内部资源（如图片、字体），JS取内容时也无需过滤无用节点。
<div style="display:none">仍会解析CSS、触发布局计算，尤其含大量子元素时有性能损耗 <li> <code><template></template>里的<script></script>和<style></style>标签默认不执行/不生效，避免意外副作用- 提取内容只需
template.content.cloneNode(true)，比正则或DOM操作更可靠
最容易被忽略的是：分离不是目的，而是让每次修改只影响一个关注点。改样式时不想grep JS，调接口时不想碰HTML结构，删字段时不用翻遍所有class名——这种边界感，得靠data-属性、<template></template>和构建工具链共同守住。
