html自定义元素不支持真正懒加载，必须先执行customelements.define()再解析dom，否则变为htmlunknownelement；正确做法是先占位后upgrade，用customelements.upgrade()激活已存在节点，并配合whendefined()等待定义就绪。
HTML 自定义元素本身不支持懒加载——customElements.define() 必须在元素被解析进 DOM 前就执行，否则 <x-button></x-button> 会变成 HTMLUnknownElement，既不渲染也不触发生命周期。所谓“懒加载”，其实是控制 define() 的时机 + 手动升级已存在节点。
为什么 import() + define() 直接写会报错
常见错误写法：customElements.define('x-chart', () => import('./chart.js').then(m => m.XChart))。这会抛出 TypeError: Class constructor XChart cannot be invoked without 'new'，因为 customElements.define() 第二个参数必须是同步返回的类，不能是 Promise 或函数工厂。
-
define()不接受异步回调，也不支持延迟注册 - 即使用
await包裹，在模块顶层执行仍可能因 HTML 解析早于 JS 执行而失败 - 非模块环境（如
<script></script>未加type="module"）下，import()直接报Failed to resolve module specifier
可靠方案：先占位，后 upgrade
核心思路是让自定义标签先以“无行为”状态存在于 DOM 中（比如 SSR 渲染或静态 HTML 写死），等模块加载完成、define() 执行后，再调用 customElements.upgrade() 激活已有节点。
- 所有
<x-xxx></x-xxx>标签必须在define()前已挂载到 DOM - 用
customElements.whenDefined('x-chart')等待定义就绪，再批量升级：document.querySelectorAll('x-chart').forEach(el => customElements.upgrade(el)) - 升级只对当前已存在的节点生效；后续动态插入的节点会自动升级（前提是已
define） - 示例代码中，
loadAndDefineChart()应在 DOM ready 后调用，避免querySelectorAll返回空列表
Webpack/Vite 构建时路径必须静态
import('./chart.js') 这种写法能被打包器识别并生成独立 chunk；但 import('./' + name + '.js') 这类拼接路径会被忽略，导致运行时找不到模块。
- 路径必须是静态字符串，不能含变量、模板字面量或表达式
- SSR 场景下需注意：服务端无法执行
import()，必须配合条件判断或预加载逻辑 -
whenDefined()在未定义时返回 Promise，可 await，但不可用于阻塞渲染——它不解决 FOUC（闪白），只保证升级时机
真正容易被忽略的是：Shadow DOM 查询范围。如果自定义元素内部用了 shadowRoot.querySelector()，而升级前 DOM 已存在但未初始化，查询会返回 null；必须确保 upgrade() 完成后再访问 shadowRoot，或在 connectedCallback 中做安全兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
