html无法实现组件版本兼容，因其是声明式语言，无运行时判断能力；version属性被浏览器忽略，所有版本路由必须由js拦截解析，并通过命名空间隔离、属性控制、api兼容检测等协同实现。
HTML 本身不提供组件版本管理能力，所谓“组件版本兼容性”必须靠 JS 控制逻辑 + HTML 结构降级 + CSS 特性兜底三者协同实现，不存在纯 HTML 解决方案。
为什么不能只靠 HTML 做版本兼容
HTML 是声明式标记语言，没有运行时判断、条件加载或 API 降级能力。像 <custom-element version="2.0"></custom-element> 这类写法浏览器直接忽略——HTML 解析器不识别 version 属性，也不会据此切换行为。所有“版本分支”都得由 JS 拦截、解析、路由到对应实现。
自定义元素（Custom Elements）的版本兼容实践
现代 Web Components 方案中，customElements.define() 是单次注册，重复注册会抛 DOMException: "Failed to execute 'define' on 'CustomElementRegistry'" 错误。要支持多版本共存，必须手动隔离：
- 用命名空间区分：注册为
my-button-v1和my-button-v2，而非覆盖同一标签名 - 避免自动升级：不要在 v1 组件内部用
customElements.define('my-button', V2Class)，这会破坏已渲染的 v1 实例 - 通过属性控制行为：如
<my-button data-version="1"></my-button>，JS 初始化时读取该值决定实例化哪个类 - v1 组件内禁止调用 v2 独有 API（如
openPopover()），否则旧版页面 JS 执行时报TypeError
第三方组件库（如 Lit、Stencil）的兼容要点
这类库生成的组件通常自带构建时 polyfill 注入和特性检测，但仍有关键细节需人工干预：
- 检查打包产物是否包含
custom-elements-es5-adapter.js：IE11 需它来运行 ES6 class，缺失则整个组件白屏 - 确认 polyfill 加载时机：
<script src="webcomponents-bundle.js"></script>必须在任何自定义元素使用前执行，否则 IE 中document.createElement('my-button')返回普通HTMLUnknownElement - 避免跨版本 DOM 交互：v1 组件调用 v2 组件的
shadowRoot.querySelector()可能因 v2 启用了closedmode 而返回null - 样式隔离风险：v2 组件若用
:host-context( .theme-dark )，而 v1 页面未加.theme-dark类，则样式不生效——这不是 bug，是设计预期，需文档明确标注
最容易被忽略的兼容断点
不是版本号本身，而是底层依赖的隐式变更：
-
IntersectionObserver在 Safari 12.1+ 才支持rootMargin，但组件文档若只写 “支持 IntersectionObserver”，开发者可能误以为所有参数都可用 - 某个 v2 组件内部改用
AbortController处理 fetch，而目标环境（如 Electron 13）中该 API 存在但signal传给fetch会静默失败——必须加if ('signal' in Request.prototype)检测 - 组件 CSS 中用了
color-mix()，这在 Chrome 111+ 才支持，但构建工具（如 PostCSS）默认不处理，上线后仅表现为颜色异常，控制台无报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
