自定义元素无内置版本号，版本管理依赖类定义、注册时机和dom使用协同；常见冲突是同名多次注册或混用不同版本类，需通过命名隔离、构建注入和动态检查解决。
自定义元素本身没有版本号字段，customElements.define() 也不接受版本参数——所谓“版本管理”，本质是人对类定义、注册时机、DOM 使用方式的协同控制，不是靠 HTML 标签写个 v="2.0" 就能生效。
customElements.define() 失败时怎么定位版本冲突
常见现象是页面空白、控制台报 Failed to execute 'define' on 'CustomElementRegistry': the name "my-button" has already been used 或 NotSupportedError: Failed to execute 'attachShadow'。这往往不是版本号写错了，而是同一标签名被多次注册，或不同版本类在同一个页面里混用。
- 检查是否在多个 JS 文件中都调用了
customElements.define('my-button', MyButtonV1)和customElements.define('my-button', MyButtonV2)—— 浏览器只认最后一次，前面的直接被覆盖 - 确认构建产物里有没有残留旧版 class 定义（比如 Vite 打包后仍存在未删的
my-button-v1.js），导致 runtime 同时加载两个同名类 - 开发时用
customElements.get('my-button')查当前注册的是哪个构造函数，比看文件名更可靠
HTML 中怎么安全使用不同版本的自定义元素
浏览器不支持 <my-button version="2.0"></my-button> 这种语法，也无法靠属性自动切换实现逻辑。真要并存多版本，得靠显式命名隔离。
- 用语义化前缀区分：注册
my-button-v2和my-button-v3，而不是反复覆盖my-button - 避免在 HTML 模板里硬编码版本号，改用构建时注入：Vite 插件把
process.env.BUTTON_VERSION注入到全局变量，再由 JS 动态生成对应标签名 - 服务端渲染（SSR）场景下，如果模板引擎支持条件输出，可基于环境变量决定渲染
<my-button-v2></my-button-v2>还是<my-button-v3></my-button-v3>，但注意客户端 JS 必须同步注册对应版本
attributeChangedCallback 不响应初始值？那是你没处理版本迁移
从 v1 升级到 v2 时，如果新版本 class 增加了 static get observedAttributes()，但旧 HTML 已写好 <my-button label="ok" size="large"></my-button>，这些属性在首次 connectedCallback 时不会触发 attributeChangedCallback —— 初始值只进 constructor，不走变更钩子。
- 必须在
connectedCallback里手动读取所有 observed 属性，做一次初始化同步：this.label = this.getAttribute('label') || '' - 若 v2 新增了
theme属性，而旧页面没写这个属性，就别假设它有默认值；要么在observedAttributes里声明，要么在connectedCallback里 fallback 到配置项 - 跨版本 DOM 迁移时，建议保留 v1 的 class 名作为兼容兜底，用
customElements.whenDefined('my-button')等待后再升级节点，而不是暴力 replaceChild
Shadow DOM 样式更新后页面没变？检查版本是否错配
写了新 CSS 但 <my-button></my-button> 还是老样式，大概率不是缓存问题，而是 JS 加载了旧版 class，或者 Shadow DOM 内部样式没随版本更新重写。
- 每个版本的 class 应该内联自己专属的
<style></style>，不要复用外部 CSS 文件路径——路径相同但内容不同，浏览器可能复用缓存 - 如果用
shadowRoot.appendChild(styleEl)动态注入样式，确保 styleEl 是每次实例化时新建的，而不是单例共享 - Vite/HMR 热更新时，
customElements.define()不会自动重新执行，需手动刷新或加if (customElements.get('my-button')) { customElements.define(...) }容错
最常被忽略的一点：自定义元素的“版本”不在 HTML 里，而在 JS 类定义、构建产物哈希、以及团队对 customElements.define() 调用时机的共识里。哪怕只改了一行样式，只要没重建 class 或没重新 define，用户看到的就是旧版本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
