data-属性仅是自定义字符串容器，不提供模块功能；它适合做运行时标记、简单配置或调试辅助，但需配套js逻辑消费，不可替代es module或web components。
HTML 的 data- 属性不是用来“设置模块名称”的，它只是自定义数据容器，浏览器和 JavaScript 不会自动识别、解析或执行任何“模块语义”。所谓“模块名称”是开发者自己约定的逻辑概念，data- 属性本身不提供模块注册、加载或作用域隔离能力。
data-属性根本不能当模块名用
很多人看到 data-module="header" 或 data-component="carousel" 就以为这是在声明一个模块，其实这只是往 DOM 节点上挂了个字符串标记。浏览器不会因此加载 JS、不会初始化组件、也不会做任何封装——它就只是个字符串属性。
常见错误现象：
- 写了
data-module="user-card"，但没写任何 JS 去读取它，结果页面毫无反应 - 多个地方用了相同
data-module值，但逻辑互相覆盖，因为没人处理冲突 - 误以为
data-module能替代import或 Web Components，导致后期无法拆分、复用或测试
什么时候该用 data- 属性做标记
它只适合做轻量级、运行时可读的上下文提示，前提是：你已经有配套的初始化逻辑去消费它。
使用场景包括：
- 统一启动入口：比如
document.querySelectorAll('[data-module]')批量查找并初始化对应模块 - 传递简单配置：如
data-delay="200"、data-autoplay="true"，避免把配置硬编码进 JS - 调试辅助：在 DevTools 里快速定位某块区域属于哪个业务模块（
data-debug-id="checkout-step2"）
注意：data- 属性值只能是字符串，布尔值要写 "true"/"false"，数字也要引号包裹，否则会被转成字符串再解析。
data-composition-src 是个特例，但也不是模块系统
在 HyperFrames 这类视频工程工具中，data-composition-src 确实有实际行为：引擎会根据这个路径加载并替换内容。但它仍是单向、静态、时间线驱动的引用机制，不是通用前端模块系统。
关键限制：
- 子组合的
<div> 必须为空，不能有任何子元素（你当初卡了半小时就是这原因）<li>它不支持传参、事件通信、状态同步，也不参与 JS 模块生命周期</li> <li>仅限 HyperFrames 渲染器识别，普通浏览器或 Webpack 完全无视该属性</li> <p>如果你真需要模块化，该用 ES Module、Web Components 或框架的组件机制，而不是靠 <code>data-属性“假装模块化”。容易被忽略的兼容性细节
data-属性本身兼容所有现代浏览器，但它的“用途”极易失控：- 不同团队成员可能用同一属性名表达不同含义（
data-type在 A 组表示数据源，在 B 组表示 UI 样式） - 没有类型校验，拼错属性名（如
data-moudle）会导致逻辑静默失效 - 服务端渲染时若未同步输出这些属性，客户端 JS 初始化就会找不到目标节点
真正管用的做法是：把
data-当作胶水，不是骨架；用它连接已有模块，别指望它构建模块。 - 不同团队成员可能用同一属性名表达不同含义（
