自定义元素首屏性能关键在注册时机与connectedcallback幂等性：首屏组件需html解析前注册，非首屏按需动态导入注册，constructor和connectedcallback须轻量；未及时注册会导致htmlunknownelement无法升级；动态插入html需手动upgrade()；connectedcallback必须加初始化守卫避免重复执行。
自定义元素本身不加速首屏，关键在定义时机与范围：首屏组件必须在 HTML 解析完成前注册，非首屏组件必须按需动态导入后注册，且 constructor 和 connectedCallback 必须轻量——否则会直接拖慢 FCP、延长白屏时间。
customElements.define() 为什么不能在全局脚本开头调用
浏览器解析 HTML 时，遇到未注册的自定义标签（如 <data-table></data-table>）会创建 HTMLUnknownElement 实例，并**不会等你后续注册再自动升级**。一旦解析结束，这些节点就永远卡在“未知”状态，connectedCallback 永不触发。
常见错误现象包括：页面显示了标签但无行为、document.querySelector('data-table') 能取到节点但生命周期静默、DevTools 中看到大量 HTMLUnknownElement 实例。
- 正确做法：把
customElements.define()放在<script type="module" defer></script>中，且该 script 必须位于
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
