html按钮无法直接模块导出，因es module仅支持js文件导入；可行方案有三：构建期内联、运行时js注入、web components封装，其中后者是响应属性变化的唯一原生解法。
HTML 按钮无法直接“模块导出”，所谓“导出”本质是复用机制的选择问题——你得先决定它跑在构建流程里、运行时 JS 里，还是 Web Components 里。
为什么 import './button.html' 会报错
浏览器原生不支持 HTML 文件作为模块导入。ES Module 的 import 只认 JavaScript，遇到 .html 后缀会立刻抛出 TypeError: Failed to resolve module specifier。这不是路径写错，是规范层面封死的路。
- 即使你用
fetch('./button.html')拿到字符串，那也只是 HTML 片段，不是可执行模块——里面嵌的<script></script>不会自动运行，样式也不会自动注入 -
<template></template>标签能存结构，但必须靠 JS 主动克隆、插入、绑定事件，它本身不带逻辑封装能力 - 所有“HTML 模块化”方案，最终都得落到 JS 控制流或构建阶段处理，没有纯 HTML 的 import 语法
三种可用路径：选错就踩坑
真正落地时只有三条路可走，每条对应不同约束：
-
构建期内联（推荐静态站）：用
posthtml-include或html-loader，在打包时把button.html插进主 HTML。输出仍是标准 HTML，无运行时依赖，SEO 友好。注意<include src="components/button.html"></include>语法不能写成注释或自定义标签 -
运行时 JS 注入（适合小项目）：用
fetch()加载 HTML 字符串，再element.innerHTML = htmlString。但必须确保 DOM 已就绪（包裹在DOMContentLoaded里），且按钮含交互逻辑时，事件绑定必须由主 JS 统一做，不能塞在片段里 -
Web Components 封装（推荐中大型项目）：写
class ButtonElement extends HTMLElement，用attachShadow隔离样式和结构。这样<my-button label="Submit"></my-button>才算真正“导出可用”。注意connectedCallback里初始化，别在constructor里操作 DOM；static get observedAttributes()才能响应属性变化
<button></button> 标签本身要不要封装？
纯样式按钮（比如只改背景色、圆角、阴影）没必要封装成组件——用 CSS 自定义属性 + BEM 类名更轻量：<button class="btn btn--primary">Save</button>。封装的收益点在于行为耦合：比如按钮点击后自动禁用、触发 loading 状态、校验表单再提交。这时候才值得上 customElements.define()。
- 如果按钮逻辑简单，用
<template id="btn-template"></template>+ 克隆方式足够，兼容 IE11 - 如果要响应
disabled、loading属性并自动更新 UI，Web Components 是唯一原生解法 - 所有方案都要避开一个坑：别在 partial 文件里写
<script>console.log('init')</script>——它不会执行，也不该执行
真正麻烦的从来不是怎么写按钮，而是它被谁调用、在哪初始化、样式会不会漏出去、状态要不要跨组件同步。这些细节没对齐，模块化就只剩个壳子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
